c# - c#Wforms中带有可选项目的二维网格？

Question

如何在 windows 窗体中完成每个元素的 10x10 可选元素的 2D 和文本？有没有一种简单的方法可以做到这一点？

我需要在网格中以可排序的方式（索引）选择一些元素，以便向我的机器人发送新位置。我的意思是：第一个：转到网格的第一个选定元素（选中时标记为 1）第二个：转到网格的第二个选定元素（选中时标记为 2）......等等......

网格看起来像这样：（_{来源：xmswiki.com）}

我试图避免将 100 个复选框彼此靠近...

Answer 1

将其发布为答案，因为 OP 要求它：

<Window x:Class="MiscSamples.GridRobot"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="GridRobot" Height="500" Width="600">
<DockPanel>

    <DockPanel DockPanel.Dock="Top">
        <TextBlock Text="Size:" Margin="2" DockPanel.Dock="Left"/>
        <TextBox Text="{Binding Size}" IsReadOnly="True" DockPanel.Dock="Left" Margin="2" Width="50"/>
        <Slider Maximum="20" Minimum="2" Value="{Binding Size}"/>
    </DockPanel>

    <StackPanel DockPanel.Dock="Left" Width="100" Margin="2">
        <TextBlock Text="Route:" TextAlignment="Center" FontWeight="Bold"/>
        <ItemsControl ItemsSource="{Binding Route}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <TextBlock TextAlignment="Center">
                        <TextBlock.Text>
                            <MultiBinding StringFormat="{}{0:D2},{1:D2}">
                                <Binding Path="Row"/>
                                <Binding Path="Column"/>
                            </MultiBinding>
                        </TextBlock.Text>
                    </TextBlock>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </StackPanel>

    <Grid>
        <ItemsControl ItemsSource="{Binding Squares}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <UniformGrid Rows="{Binding Size}" Columns="{Binding Size}"/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Border BorderBrush="DarkGray" BorderThickness="1">
                        <Button Command="{Binding DataContext.GoToCommand, RelativeSource={RelativeSource AncestorType=ItemsControl}}"
                                CommandParameter="{Binding}">
                            <Button.Template>
                                <ControlTemplate>
                                    <Border Background="#05FFFFFF">
                                        <Viewbox>
                                            <TextBlock Text="{Binding PathIndex}" 
                                            TextAlignment="Center" VerticalAlignment="Center"/>
                                        </Viewbox>
                                    </Border>
                                </ControlTemplate>
                            </Button.Template>
                        </Button>
                    </Border>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
        <Canvas>
            <!-- I was about to add the Robot Peg here and animate it -->
        </Canvas>
    </Grid>
</DockPanel>
</Window>

代码背后：

public partial class GridRobot : Window
{
    public GridRobot()
    {
        InitializeComponent();
        DataContext = new GridRobotViewModel();
    }
}

查看型号：

public class GridRobotViewModel: PropertyChangedBase
{
    private int _size;
    public int Size
    {
        get { return _size; }
        set
        {
            _size = value;
            OnPropertyChanged("Size");
            CreateItems();
        }
    }

    private ObservableCollection<GridItem> _squares;
    public ObservableCollection<GridItem> Squares
    {
        get { return _squares ?? (_squares = new ObservableCollection<GridItem>()); }
    }

    private ObservableCollection<GridItem> _route;
    public ObservableCollection<GridItem> Route
    {
        get { return _route ?? (_route = new ObservableCollection<GridItem>()); }
    }

    private void CreateItems()
    {
        Squares.Clear();
        Route.Clear();
        for (int i = 0; i < Size; i++)
        {
            for (int j = 0; j < Size; j++)
            {
                Squares.Add(new GridItem() {Row = i, Column = j});
            }
        }
    }

    private Command<GridItem> _goToCommand;
    public Command<GridItem> GoToCommand
    {
        get { return _goToCommand ?? (_goToCommand = new Command<GridItem>(Goto){IsEnabled = true}); }
    }

    private void Goto(GridItem item)
    {
        if (item.PathIndex == null)
        {
            item.PathIndex = Squares.Max(x => x.PathIndex ?? 0) + 1;

            Route.Add(item);    
        }
    }
}

数据项：

public class GridItem: PropertyChangedBase
{
    public int Row { get; set; }

    public int Column { get; set; }

    private int? _pathIndex;
    public int? PathIndex
    {
        get { return _pathIndex; }
        set
        {
            _pathIndex = value;
            OnPropertyChanged("PathIndex");
        }
    }
}

MVVM 的支持类：

public class PropertyChangedBase:INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged(string propertyName)
    {
        Application.Current.Dispatcher.BeginInvoke((Action) (() =>
            {
                PropertyChangedEventHandler handler = PropertyChanged;
                if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
            }));
    }
}

public class Command<T>: ICommand
{
    public Action<T> Action { get; set; }

    public void Execute(object parameter)
    {
        if (Action != null && parameter is T)
            Action((T)parameter);
    }

    public bool CanExecute(object parameter)
    {
        return IsEnabled;
    }

    private bool _isEnabled;
    public bool IsEnabled
    {
        get { return _isEnabled; }
        set
        {
            _isEnabled = value;
            if (CanExecuteChanged != null)
                CanExecuteChanged(this, EventArgs.Empty);
        }
    }

    public event EventHandler CanExecuteChanged;

    public Command(Action<T> action)
    {
        Action = action;
    }
}

结果：

• 只需将我的代码复制并粘贴到 a 中File -> New Project -> WPF Application，然后自己查看结果。
• 你说的是 10 x 10，但我更进一步，添加了一个 Slider 以使网格大小可自定义。
• 单击任何单元格将使其作为路线的一部分排队。
• 完全独立于分辨率。
• 我正要开始在上面放一些非常好的东西（动画、由椭圆表示的机器人运动、路径的线条等）。
• 忘记winforms，它没用。