WPF的新手 - 使用什麼控件/入門？

Question

我是WPF n0ob，我正在努力選擇合適的控件來獲得我想要的佈局。

我想要做的是在屏幕上畫一串正方形（虛擬便利貼）。每張紙幣的尺寸都會相當大（約150像素左右），可能會有數百個這樣的紙幣。我希望整個事情都是可以滾動的，這樣你就可以調整窗口的大小，不管你喜歡什麼，整個事情應該是可縮放的。

我已經做到了這一點，它的工作原理。
但是我所做的似乎是非常錯誤的......

在代碼中，我動態創建便籤後將其添加到巨型畫布中。我手動做數學來確定每個音符的放置位置以及畫布的大小。我在頂部添加了一些標籤，不得不返回並添加'Y偏移量'值來將所有方塊向下推。我實際上生成了三個不同的畫布控件，然後將它們中的每一個添加到ScrollViewer內部的堆棧面板。我添加了一個滾動條，並設置了堆疊面板以在您調整條時進行放大和縮小。

它'工作'，但我覺得我真的沒有用它的方式使用WPF。我試圖用網格來實現同樣的事情，但網格似乎不想適當地調整自己的尺寸。

有人能告訴我一個'更好'的方式來實現相同的外觀嗎？

這是我的Xaml代碼 - 如你所見;沒有太多吧....

<Window x:Class="Window1" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
Title="Window1" Height="300" Width="300"> 
<Grid x:Name="LayoutRoot"> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="25" /> 
     <RowDefinition /> 
    </Grid.RowDefinitions> 
    <Slider x:Name="ZoomSlider" Minimum="0.01" Value="1" Maximum="2" Margin="0,0,0,6" /> 
    <ScrollViewer x:Name="MyScroller" Grid.Row="1" HorizontalScrollBarVisibility="Visible" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"> 
     <StackPanel x:Name="TicketsGrid" Background="White" HorizontalAlignment="Center"> 

     </StackPanel> 
    </ScrollViewer> 
</Grid>    

然後這裏是我在做什麼的代碼（醜陋！）

For Each myWorkItem As WorkItem In myWorkItems 
     Dim newRect As New Border 

     newRect.Width = TicketSizeX 
     newRect.Height = TicketSizeY 

     If myWorkItem.State.ToUpper.Contains("HOLD") Then 
      newRect.Background = New SolidColorBrush(Colors.Purple) 
     Else 
      newRect.Background = New SolidColorBrush(Color) 
     End If 

     newRect.CornerRadius = New System.Windows.CornerRadius(5) 
     newRect.BorderThickness = New System.Windows.Thickness(1) 
     newRect.BorderBrush = New SolidColorBrush(Colors.Black) 

     Dim myPanel As New StackPanel 
     newRect.Child = myPanel 

     Dim lblTitle As New Label 
     lblTitle.Content = myWorkItem.Id 
     lblTitle.FontWeight = System.Windows.FontWeights.Bold 

     Dim lblDesc As New TextBlock 
     lblDesc.Text = myWorkItem.Title 
     lblDesc.TextWrapping = TextWrapping.Wrap 


     myPanel.Children.Add(lblTitle) 
     myPanel.Children.Add(lblDesc) 

     newRect.SetValue(Canvas.LeftProperty, CType(((TicketCount Mod TicketsXPerUser) * TicketStepX) + (xOffset * TicketStepX * TicketsXPerUser), Double)) 
     newRect.SetValue(Canvas.TopProperty, CType(((Math.Floor((TicketCount/TicketsXPerUser)) * TicketStepY)) + NameLabelHeight, Double)) 

     myCanvas.Children.Add(newRect) 
     TicketCount += 1 
    Next 

    MyCanvas.Width = (TicketStepX * TicketsXPerUser) * myTFS.SharedCodeTeam.Count 
    MyCanvas.Height = (CType(((Math.Floor((MaxTicket/TicketsXPerUser)) + 1) * TicketStepY), Double)) 

    TicketsGrid.Children.Add(MyCanvas) 

Answer 1

1. 的ScrollViewer與ItemsControl裏面。
2. 綁定的ItemsControl的的ItemsSource屬性的的ObservableCollection < PostIt>（其中PostIt是與所有的那張張貼在信息一個普通的舊CLR對象）。
3. 到的ItemsControl
4. 添加控制的ItemsTemplate屬性添加的DataTemplate到的DataTemplate並直接將它們綁定到PostIt的實例
5. 添加PostIt實例的ObservableCollection < PostIt>在您的代碼中。

ScrollViewer處理所有滾動。這就是你需要的。

的ItemsControl設計結合對的集合。對於集合中的每個實例，它的數字什麼的DataTemplate使用，創建模板的副本，設置root的DataContext的將其從收集拉實例，並添加模板本身。它爲集合中找到的每個實例執行此操作。

在你的代碼隱藏，所有你需要做的就是創建一批PostIts，並將它們添加到集合。像你這樣的UI元素沒有太多的構建。 Urgh。

如果你能掌握這個概念，你是從認識MVVM，在WPF模型 - 視圖 - 控制器模式一步之遙。閱讀它，試試看。它是一個非常簡單的方法，可以使用複雜的用戶界面創建非常複雜的應用程序，但只需最少的代碼（而且目前沒有那麼多垃圾）。