双数组和网格之间的数据绑定 [英] Data Binding between a double array and a grid

问题描述

我对 C#/XAML 比较陌生，并且很难进行数据绑定.我想在 c# 双数组和 XAML 网格之间进行数据绑定.

I am rather new to C#/XAML and have difficulties to do Data Binding. I would like to do Data binding between an c# double array and a XAML grid.

// This double array is filled with Square objects which are elements of the map
Square[,] worldMapGrid = new Square[4,4];

// For showing an very simple example, we can fill it like this:
worldMapGrid[0,0] = new SquareMountain();
worldMapGrid[0,1] = new SquareDesert();
worldMapGrid[0,1] = new SquarePrairie();
...

我的 XAML 代码中有这个:

I have in my XAML code this :

<UniformGrid x:Name="MapGrid" Width="600" Height="600" Columns="4" Rows="4">
    FILL WITH SQUARES HERE
</UniformGrid>

在我的 ResourceDictionnary 中:

And in my ResourceDictionnary :

<Style x:Key="ButtonSquare" TargetType="{x:Type Button}">   
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Viewbox>
                    <Rectangle x:Name="path1" Fill="CHANGE HERE"/>
                </Viewbox>
                <ControlTemplate.Triggers>
                    ...
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

我想用ButtonSquare对象填充名为MapGrid的UniformGrid，并根据对象的类型设置它们的矩形颜色Fill属性在 worldMapGrid 中.实际上，MapGrid 是worldMapGrid 的可视化表示.

I would like to fill the UniformGrid named MapGrid with ButtonSquare objects, and set their Rectangle color Fill property according to the type of object in the worldMapGrid. Actually, MapGrid is a visual representation of worldMapGrid.

所以我想在这两个对象之间进行数据绑定，但我在这个概念上挣扎.有人可以告诉我怎么做吗?

So I want to do Data Binding between these 2 objects, but I am struggling with this concept. Can someone show me how to do this?

推荐答案

好的，这是一个示例窗口 xaml 文件:

Ok here is a sample window xaml file:

<Window x:Class="SquareUniformGrid.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:SquareUniformGrid"

    Title="MainWindow" Height="800" Width="700">

<Window.Resources>
    <local:SquareConverter x:Key="squareConverter"/>

    <DataTemplate x:Key="mountain">
        <Button Style="{StaticResource ButtonSquare}"
                Background="Black"/>
    </DataTemplate>
    <DataTemplate x:Key="desert">
        <Button Style="{StaticResource ButtonSquare}"
                Background="Brown"/>
    </DataTemplate>
    <DataTemplate x:Key="prairie">
        <Button Style="{StaticResource ButtonSquare}"
                Background="Green"/>
    </DataTemplate>

    <local:ButtonTemplateSelector x:Key="selector" Mountain="{StaticResource mountain}" Desert="{StaticResource desert}" Prairie="{StaticResource prairie}"/>
</Window.Resources>
<Grid>
    <ItemsControl Background="Gray" Margin="8" Width="600" Height="600" ItemsSource="{Binding MapGrid}" ItemTemplateSelector="{StaticResource selector}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <UniformGrid Rows="4" Columns="4"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ItemsControl>
</Grid>

这是对应的视图模型:

    public class MainWindowViewModel : INotifyPropertyChanged
{
    #region Member Variables
    private List<Square> worldMapGrid = new List<Square>();
    #endregion

    #region Ctr
    public MainWindowViewModel()
    {
        BuildWorldMap();
    }
    #endregion

    #region Public Methods

    #endregion

    #region Private Methods
    private void BuildWorldMap()
    {
        MapGrid.Add(new SquareDesert());
        MapGrid.Add(new SquareDesert());
        MapGrid.Add(new SquareDesert());
        MapGrid.Add(new SquareDesert());

        MapGrid.Add(new SquareMountain());
        MapGrid.Add(new SquareMountain());
        MapGrid.Add(new SquareMountain());
        MapGrid.Add(new SquareMountain());

        MapGrid.Add(new SquarePrairie());
        MapGrid.Add(new SquarePrairie());
        MapGrid.Add(new SquarePrairie());
        MapGrid.Add(new SquarePrairie());

        MapGrid.Add(new SquarePrairie());
        MapGrid.Add(new SquarePrairie());
        MapGrid.Add(new SquarePrairie());
        MapGrid.Add(new SquarePrairie());
    }

    private void RaisePropertyChanged(string _propertyName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(_propertyName));
        }
    }
    #endregion

    #region Properties
    public List<Square> MapGrid
    {
        get
        {
            return this.worldMapGrid;
        }
        set
        {
            this.worldMapGrid = value;
            RaisePropertyChanged("MapGrid");
        }
    }
    #endregion

    #region INotifyPropertyChanged Members
    public event PropertyChangedEventHandler PropertyChanged;
    #endregion
}

这是 DataTemplateSelector 的代码:

Here is the code for the DataTemplateSelector:

    public class ButtonTemplateSelector : DataTemplateSelector
{
    #region Member Variables

    #endregion

    #region Ctr
    public ButtonTemplateSelector()
    {

    }
    #endregion

    #region Overrides
    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        if (item is SquareDesert)
        {
            return Desert;
        }
        if (item is SquareMountain)
        {
            return Mountain;
        }
        if (item is SquarePrairie)
        {
            return Prairie;
        }

        return base.SelectTemplate(item, container);
    }
    #endregion

    #region Public Methods

    #endregion

    #region Private Methods

    #endregion

    #region Properties
    public DataTemplate Mountain
    {
        get;
        set;
    }

    public DataTemplate Desert
    {
        get;
        set;
    }

    public DataTemplate Prairie
    {
        get;
        set;
    }
    #endregion
}

这组代码根据 worldmapgrid 设置有效地绘制了带有彩色图块的统一网格.

This set of code effectively draws a uniform grid with colored tiles based on the worldmapgrid settings.

糟糕，忘记样式了:

<Style x:Key="ButtonSquare" TargetType="{x:Type Button}">
    <Setter Property="Background" Value="{Binding Background, RelativeSource={RelativeSource TemplatedParent}}"/>
</Style>

这篇关于双数组和网格之间的数据绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！