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

ItemsControl

ScrollViewer 。
将 ItemsControl 的 ItemsSource 属性绑定到 ObservableCollection ＆lt; PostIt ＆gt; （其中 PostIt 是一个普通的旧CLR对象，其中包含发布的所有信息）。
将 DataTemplate 添加到 ItemsControl

ItemsTemplate

将控件添加到 DataTemplate 并将它们直接绑定到 PostIt
将 PostIt 实例添加到 ObservableCollection ＆lt; PostIt ＆gt;在你的代码中。

ScrollViewer处理所有滚动。这就是你所需要的一切。

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

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

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

WPF新手 - 使用什么控制/入门？

1 个答案: