c# Wforms 中带有可选项目的 2D 网格? [英] 2D grid with selectable items in c# Wforms?

问题描述

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

How can be done a 2D of 10x10 selectable elements each element with text in a windows form? Is there an easy way of doing this?

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

I need to select some elements in an orderable way (indexed) in the grid in order to send new positions to my robot. I mean: 1st: go to first selected element of the grid (labeled as 1 when selected) 2nd: go to the second selected element of the grid (labeled as 2 when selected) ... and so on...

网格看起来像这样:
_{(来源:xmswiki.com)}

The grid would look like this:
_{(source: xmswiki.com)}

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

推荐答案

将此作为答案发布，因为 OP 要求它:

Posting this as an answer because the OP asked for it:

<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;
    }
}

结果:

• 只需将我的代码复制并粘贴到 文件中 ->新项目 ->WPF 应用程序并亲自查看结果.
• 您说的是 10 x 10，但我更进了一步，添加了一个滑块，使网格大小可自定义.
• 点击任何单元格将使其作为路线的一部分排队.
• 完全独立于分辨率.
• 我正准备在上面添加一些非常棒的东西(动画、由椭圆表示的机器人运动、路径线等).
• 忘记 winform，它没用.

这篇关于c# Wforms 中带有可选项目的 2D 网格?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！