如何在WPF中繪制網格

Question

我正在嘗試在WPF中創建一個用戶控件來表示Go板 ，它基本上只是一些黑色線條網格，在某些交叉點上帶點。

目前我正在使用網格控件來處理寶石的放置，但其中一個難點是石頭被放置在網格線的交叉點而不是它們之間，所以如果我想繪制線條，他們需要穿過網格單元的中心。

我還是WPF的新手，所以我不確定我應該如何接近這個; 我應該在每次控件渲染時手動繪制線條（如果是，如何？），還是有更好的方法？

Answer 1

你可以通過多種方式解決這個問題。

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

_{（來源： microsoft.com ）}

很可能你不必使用Grid。 隨機定位Canvas適合更好。 如果您不喜歡畫筆，可以使用幾何圖形或形狀來繪制線條或其他圖形。 我不是指你在DrawingVisuals，因為從一開始他們的理解可能會稍微強一些。

更新 ：在CodeProject上找到這篇文章： 在WPF中繪制一個Boardgame 。 也許你會發現它很有用。

希望這可以幫助，

干杯，安瓦卡。

Answer 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>

希望這可以幫助

Answer 3

隨機的想法可能有所幫助：

1. 使用網格 - 它在那里，它應該很好地定位的東西
2. 網格“單元格”內容基本上是一個三態的東西，網格線上沒有任何東西，網格線上面有一塊白色的石頭，網格線上面有一塊黑色的石頭 - 這應該是一個可重復使用的WPF標記 - 可能一個用戶控件，可能是別的東西（我對WPF來說還是太新了）。 我很想把它綁定到你的數據上。
3. 您可以將行為附加到單元格內容以獲取其單擊時以及其他內容

不是真的詳細的如何 - 但這就是我如何解決問題

Answer 4

我剛在博客中添加了這篇文章：

編輯：將文件移動到我的谷歌驅動器

我認為它會對你有所幫助， 這是你得到的結果。 您也可以在那里下載projet。