通过数据绑定将值传递到代码隐藏 WPF/C#答案

【问题标题】：Pass Value through Data Binding to Code-Behind WPF/C#通过数据绑定将值传递到代码隐藏 WPF/C#
【发布时间】：2017-08-15 19:29:52
【问题描述】：

我目前正在开发一个国际象棋游戏，我正在尝试将 C# 代码隐藏连接到 XAML 中的 WPF 接口。为了表示棋盘，我创建了一个 8x8 统一网格。我想将正方形（网格的单元格）的名称传递给后面的代码，然后有一个方法返回相应图像的路径。例如，如果正方形 a8 上有一辆白车，这将保存在代码隐藏中。在 xaml 中，每个方格将传递其名称（例如“a8”）并接收到白车图像的路径。如果正方形上没有棋子，则路径将链接到透明图像。这是我到目前为止所得到的：

<StackPanel Height="auto" Width="auto" Orientation="Vertical" Margin="-5,0,5,0" >
    <UniformGrid  Rows="8" Columns="8" Background="Black" Height="800" Width="800"  HorizontalAlignment="Stretch">
        <StackPanel Orientation="Vertical" Margin="1,1,1,1">
            <Image Source="Resources/WhiteSquare.png"/>
            <Image Source=""/>
            <!--{Bind path to method in code-behind; pass name (e.g. a8); function then returns path to appropriate image of piece-->
        </StackPanel>
    </UniformGrid>
</StackPanel>

我希望能为我的 xaml 和 c# 提供一些灵感。谢谢！

【问题讨论】：

从绑定开始（集合？使用ItemsControl 来展示它们，参见this）和数据模板（List<Item> -> 将项目可视化为例如Rectangle），那么您将永远不会拥有访问视图或思考“如何传递价值”.. 稍后您将使用 mvvm。
至于想法：您将需要类Board（包含单元格列表或字典，白色和黑色图形列表），Cell（包含位置，例如"A8" 和图形，如果任何，就可以了），基类Figure被其他人物继承。为了可视化它绑定ItemsControl.ItemsSource到Board.Cells（你可以使用转换器来显示白色/黑色单元格和/或Cell的布尔属性IsWhite），使用数据模板来可视化每个单元格上的数字（所以尽快当您在Cell.Figure 中设置一个时，视图将显示它）....

标签： c# wpf xaml data-binding path

【解决方案1】：

您可能应该研究一下 MVVM 设计模式：https://msdn.microsoft.com/en-us/library/hh848246.aspx。在构建基于 XAML 的 UI 应用程序时，它是推荐的设计模式。

但是要将您在 XAML 标记中定义的元素的名称传递给代码隐藏，您可以处理该元素的 Loaded 事件。例如，您可以将Image 的Tag 属性设置为“a8”，并在代码隐藏中处理Loaded 事件，如下所示：

<UniformGrid  Rows="8" Columns="8" Background="Black" Height="800" Width="800"  HorizontalAlignment="Stretch">
    <StackPanel Orientation="Vertical" Margin="1,1,1,1">
        <Image Source="Resources/WhiteSquare.png"/>
        <Image Tag="a8" Loaded="Img_Loaded" />
    </StackPanel>
</UniformGrid>

private void Img_Loaded(object sender, RoutedEventArgs e)
{
    Image img = sender as Image;
    string name = img.Tag.ToString();

    //set source of Image based on the value of name here...
    //see for an example http://stackoverflow.com/questions/350027/setting-wpf-image-source-in-code
}

【讨论】：