Как нарисовать сетку в WPF

Question

Я пытаюсь создать пользовательский элемент управления в WPF для представления Go board, который по существу представляет собой сетку черных линий с точками на некоторых пересечениях.

В настоящее время я использую элемент управления сеткой для обработки камней, но одна из трудностей заключается в том, что камни размещаются на пересечениях линий сетки, а не между ними, поэтому, если я хочу нарисовать линий, они должны пройти через центры ячеек сетки.

Я по-прежнему новичок в WPF, поэтому я не уверен, как я должен приближаться к этому; следует ли вручную рисовать строки каждый раз, когда отображается управление (если да, как?), или есть лучший способ?

Answer 1

Я просто добавил этот пост в моем блоге:

EDIT: Переведен файл my Google drive

Я думаю, что это поможет вам , this is результат вы получите. Вы также можете скачать проект.

Answer 2

Вы можете подойти к этому несколькими способами.

Например. Один из способов - использовать DrawingBrush для заполнения фона панели. Вот некоторые примеры DrawingBrush:

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

Скорее всего, вы не должны использовать сетку. Для случайного позиционирования Canvas подходит лучше. Если вам не нравятся кисти, вы можете использовать Geometries или Shapes для рисования линий или других фигур. Я не говорю вам о DrawingVisuals, потому что с самого начала они могут быть немного сложнее в понимании.

Обновлено: эта статья о CodeProject: Draw a Boardgame in WPF. Может быть, вы найдете это полезным.

Надеется, что это помогает,

Cheers, Anvaka.

Answer 3

Случайные мысли, которые могут помочь:

1. Используйте сетку - его там, и он должен работать хорошо для позиционирования вещей
2. Сетка «клетка» содержание в основном три состояния вещь, линии сетки с ничего на линиях сетки с белым камнем сверху, линии сетки с черным камнем сверху - это должен быть многоразовый фрагмент разметки WPF - возможно, пользовательский элемент управления, возможно, что-то еще (я все еще слишком новичок в WPF). У меня возникнет соблазн связать это с вашими данными.
3. Вы можете прикрепить поведение к содержимому ячейки для того, когда его щелкнуло, и для других вещей

Не очень подробно, как - но это, как я бы подойти к проблеме

Answer 4

Некоторое время назад я создал доска соседа, я создаю элемент 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> 

Надеется, что это помогает