Question

如何在Windows窗体中使用文本的每个元素完成2D 10x10可选元素的2D？这样做有简单的方法吗？

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

网格看起来像这样：2d grid http://www.xmswiki.com/xms/images/d/d0/GridType1.gif

我试图避免将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;
    }
}

结果：

enter image description here

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

带有c＃Wforms中可选项的2D网格？

1 个答案: