如何在WPF中绘制网格

时间:2010-02-23 12:39:38

标签: c# .net wpf drawing

我正在尝试在WPF中创建一个用户控件来表示Go board,这实际上只是一些黑色线条网格,在某些交叉点上有点。

目前我正在使用网格控制来处理石头的放置,但其中一个难点是石头被放置在网格线的交叉点而不是它们之间,所以如果我想绘制线条,他们需要穿过网格单元的中心。

我还是WPF的新手,所以我不确定我应该如何接近这个;我应该在每次控件渲染时手动绘制线条(如果是,如何?),还是有更好的方法?

4 个答案:

答案 0 :(得分:5)

您可以通过多种方式解决这个问题。

例如。一种方法是使用DrawingBrush填充Panel的背景。以下是一些DrawingBrush示例:

alt text http://i.msdn.microsoft.com/ms653167.wcpsdk_mmgraphics_drawingbrushexamples(en-us,VS.90).png

您很可能不必使用Grid。对于随机定位Canvas更适合。如果您不喜欢画笔,可以使用GeometriesShapes绘制线条或其他图形。我不是指你DrawingVisuals,因为从一开始他们可能会稍微有点理解。

已更新:在CodeProject上发现了这篇文章:Draw a Boardgame in WPF。也许你会发现它很有用。

希望这有帮助,

干杯,安瓦卡。

答案 1 :(得分:2)

前一段时间我创建了一个checkmate板,我创建了一个ItemsControl,其中每个元素都是ItemsControl,并带有小矩形模板。这是我的代码

<UserControl x:Class="Checker.Controls.Board"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:models="clr-namespace:Checker.Models"
    xmlns:usercontrols="clr-namespace:Checker.Controls"
    xmlns:converters="clr-namespace:Checker.Converters">
    <UserControl.Resources>
        <models:BoardModel x:Key="boardModel"/>
        <converters:BoolToBorderColorConverter x:Key="boolToBorderColorConverter"/>
        <DataTemplate DataType="{x:Type models:Figure}">
            <usercontrols:FigureControl/>
        </DataTemplate>
    </UserControl.Resources>
    <Border>
        <ItemsControl ItemsSource="{Binding Source={StaticResource boardModel}, Path=BoardItems}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <ItemsControl ItemsSource="{Binding}" MouseDown="ItemsControl_MouseDown">
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <VirtualizingStackPanel Orientation="Horizontal"/>
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <Border Background="{Binding Path='IsFirstColor', Converter={StaticResource boolToBorderColorConverter}}" BorderBrush="Black" BorderThickness="1" Width="50" Height="50" MouseDown="ItemsControl_MouseDown">
                                    <ContentPresenter Content="{Binding FigureOnBoard}">

                                    </ContentPresenter>
                                </Border>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Border>
</UserControl>

希望这有帮助

答案 2 :(得分:1)

可能有所帮助的随机想法:

  1. 使用网格 - 它在那里,它应该可以很好地定位事物
  2. 网格“单元格”内容基本上是一个三态的东西,网格线上没有任何东西,网格线上面有一块白色的石头,网格线上面有一块黑色的石头 - 这应该是一块可重复使用的WPF标记 - 可能是用户控件,可能是其他东西(我对WPF来说还是太新了)。我很想把它绑定到你的数据上。
  3. 您可以在单击内容时将行为附加到单元格内容以及其他内容
  4. 不是真的详细如何 - 但这就是我如何解决问题

答案 3 :(得分:0)

我刚在博客中添加了这篇文章:

编辑: 将文件移至my Google drive

我认为它会帮助你,this is你会得到的结果。你也可以在那里下载projet。