如何构建和编辑 xaml 网格中的图像并在 C# 中调整它们

Question

我一直在寻找通过 c sharp 和 xaml 管理网格图像的方法。到目前为止，我读到的是使用 xaml 然后用 c sharp 编辑它，而不是在 c sharp 中创建所有内容供 xaml 使用。 (how to display image in a grid using C# for WP8?) 很可能这里描述了我正在寻找的东西，我 missing/not-understanding 它。

我第一次相当盲目的尝试是创建一个 class 并在 c sharp 中给它因子，然后在 xaml 中创建的图像上使用和实现。

我想知道是否有更好的方法 "sync" 这两者。例如，如果用户点击了其中一张图片，是否有一种简单的方法可以判断他们点击了哪张图片到 myGridSpace [0] 或 [1].

到目前为止，我确定的方法是调用一种方法来搜索与我给它的坐标匹配的坐标，即：FindGridWithMethod(0,0,0,0); public int FindGridWithMethod(int Left, int Top, int Right, int Bottom) //For 循环直到找到 return 0 或 1 麻烦的是，我仍然必须在每个 image_tapped 方法中手动键入它，感觉脱节，我正在寻找更好的统一性。

我写了一个例子，我的主要项目有一个至少 4 x 4 的网格。

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=391641

namespace App1
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public class GridSpaces
        {
            //Margin
            public int fromLeft;
            public int fromRight;
            public int fromTop;
            public int fromBottom;
            //Who is in this square
            public String occupiedBy;
            //The image for the grid space
            public String sourceImage;


        }
GridSpaces[] myGridSpaces = new GridSpaces[2];
        public MainPage()
        {
            this.InitializeComponent();
            for (int i = 0; i < 2; i++)
        {


            myGridSpaces[i] = new GridSpaces()

            {
                OccupiedBy = "Nothing",
//GreenCellBorder is a string containing the file source of the image
                sourceImage = GreenCellBorder
//Insert Margin Variables Here

            };

        }
            this.NavigationCacheMode = NavigationCacheMode.Required;
        }

        /// <summary>
        /// Invoked when this page is about to be displayed in a Frame.
        /// </summary>
        /// <param name="e">Event data that describes how this page was reached.
        /// This parameter is typically used to configure the page.</param>
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            // TODO: Prepare page for display here.

            // TODO: If your application contains multiple pages, ensure that you are
            // handling the hardware Back button by registering for the
            // Windows.Phone.UI.Input.HardwareButtons.BackPressed event.
            // If you are using the NavigationHelper provided by some templates,
            // this event is handled for you.
        }

        private void Image_Tapped(object sender, TappedRoutedEventArgs e)
        {

        }

        private void Image_Tapped_1(object sender, TappedRoutedEventArgs e)
        {

        }
    }
}


<Page
    x:Class="App1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <Image HorizontalAlignment="Left" Height="100" Margin="43,72,0,0" VerticalAlignment="Top" Width="100" Source="Assets/First Action.png" Tapped="Image_Tapped"/>
        <Image HorizontalAlignment="Left" Height="100" Margin="159,72,0,0" VerticalAlignment="Top" Width="100" Source="Assets/Second Action.png" Tapped="Image_Tapped_1"/>

    </Grid>
</Page>

Answer 1

使用 Image.Tag 属性来存储您的 GridSpaces 实例。例如：
给每个Image命名，并附上相同的事件ImageTapped

         <Grid>
                <Image x:Name="image1" HorizontalAlignment="Left" Height="100"  Margin="43,72,0,0" VerticalAlignment="Top" Width="100" Source="Assets/First Action.png" Tapped="ImageTapped"/>
                <Image x:Name="image2" HorizontalAlignment="Left" Height="100"  Margin="159,72,0,0" VerticalAlignment="Top" Width="100" Source="Assets/Second Action.png" Tapped="ImageTapped"/>

            </Grid>

然后在初始化代码中：

image1.Tag = new GridSpaces();
image2.Tag = new GridSpaces();

处理点击事件的代码：

 private void ImageTapped(object sender, TappedRoutedEventArgs e)
    {
        // cast to image
        var img = (Image)sender;
        var yourObj = (GridSpaces)img.Tag;
    }

除此之外还有一件事：您应该研究 WPF 中的绑定，因为每个 GrindSpaces 都将绑定到 Image ，这样如果您在 Context 中添加一个新的 GrindSpaces 实例，列表 Images 将同步更新

如何构建和编辑 xaml 网格中的图像并在 C# 中调整它们

How to structure and edit images that are in an xaml grid and adjust them in C#

c#

xaml

windows-phone-8