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. 将DataTemplate添加到ItemsControl的ItemsTemplate属性
4. 将控件添加到DataTemplate并将它们直接绑定到PostIt的实例
5. 将PostIt实例添加到代码中的ObservableCollection < PostIt >.

ScrollViewer处理所有滚动.这就是你所需要的.

该ItemsControl的设计结合对的集合.对于集合中的每个实例,它会确定要使用的DataTemplate,创建模板的副本,将根的DataContext设置为从集合中提取的实例,并将模板添加到自身.它为集合中的每个实例执行此操作.

在你的代码隐藏中,你需要做的就是创建一堆PostIts并将它们添加到集合中.像你一样没有神奇的UI元素构造.Urgh.

如果您能掌握这个概念,那么您距离理解MVF(WPF中的模型 - 视图 - 控制器模式)还有一步之遥.阅读它,尝试一下.它是一种非常简单的方法,可以使用复杂的UI制作非常复杂的应用程序,但只需要最少的代码(当前没有任何废话).