网格的C＃XAML帮助

Question

当我继续与WPF斗争时，请忍受我。 我有这个窗口，它说明了我要实现的目标。 我有一些希望显示的数据（名称，值1，值2）。

XAML：

<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <ItemsControl>
            <Grid Height="25">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="128"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <TextBlock Text="Name:" FontWeight="Bold" TextWrapping="Wrap" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,10,0"/>
                <TextBlock Text="{Binding MyName}" Grid.Column="1" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Center"/>
            </Grid>
            <Grid Height="25">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="128"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <TextBlock Text="Value 1:" FontWeight="Bold" TextWrapping="Wrap" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,10,0"/>
                <TextBlock Text="{Binding MyValue1}" Grid.Column="1" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Center"/>
            </Grid>
            <Grid Height="25">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="128"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <TextBlock Text="Value 2:" FontWeight="Bold" TextWrapping="Wrap" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,10,0"/>
                <TextBlock Text="{Binding MyValue2}" Grid.Column="1" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Center"/>
            </Grid>
        </ItemsControl>
    </Grid>
</Window>

如您所见，窗口中的每一行都是带有两个文本框的Grid 。 除了TextBlocks文本绑定之外，每个定义都是相同的。 这意味着如果我决定将“名称”，“值1”和“值2”移至左侧以摆脱空白，则必须更新每个定义。

如何简化XAML，以便避免盲目更新每个Grid ？

背后的代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApplication2
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        private string myName;
        public string MyName
        {
            get { return myName; }
            set { myName = value; }
        }

        private int myValue1;
        public int MyValue1
        {
            get { return myValue1; }
            set { myValue1 = value; }
        }

        private float myValue2;
        public float MyValue2
        {
            get { return myValue2; }
            set { myValue2 = value; }
        }

        public MainWindow()
        {
            InitializeComponent();

            MyValue1 = 5;
            MyName = "This is a test";
            MyValue2 = 1.618f;

            this.DataContext = this;
        }
    }
}

PS我已经阅读了有关DataTemplate和Styles但是我不确定如何在此处应用它们。

Answer 1

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="128"/>
        <ColumnDefinition Width="128"/>            
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="20"/>
        <RowDefinition Height="20"/>
        <RowDefinition Height="20"/>
    </Grid.RowDefinitions>
    <TextBlock Text="Name:" FontWeight="Bold" TextWrapping="Wrap" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,10,0" Grid.Column="0" Grid.Row="0"/>
    <TextBlock Text="{Binding MyName}" Grid.Column="1" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Center"/>
</Grid>

仅使用一个网格并为要放置的控件指定行和列，例如：

 Grid.Column="0" Grid.Row="0"

Answer 2

另外，您也可以使用LabelGrid ：

LabelGrid.cs：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;

namespace XyWpf.Library.Controls
{
    public class LabelGrid : Grid
    {
        public GridLength LabelColumnWidth { get; set; }
        public GridLength ContentColumnWidth { get; set; }

        public LabelGrid()
        {
            LabelColumnWidth = GridLength.Auto;
            ContentColumnWidth = new GridLength(1, GridUnitType.Star);
        }

        public override void EndInit()
        {
            base.EndInit();

            var children = this.Children.Cast<UIElement>().ToList();
            this.Children.Clear();

            this.ColumnDefinitions.Add(new ColumnDefinition() { Width = LabelColumnWidth });
            this.ColumnDefinitions.Add(new ColumnDefinition() { Width = ContentColumnWidth });

            for (int i = 0; i < children.Count; i++)
            {
                this.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });

                var child = children[i];
                Grid.SetColumn(child, 1);
                Grid.SetRow(child, i);
                this.Children.Add(child);

                var label = new Label() { Content = Element.GetLabel(child) };
                Grid.SetColumn(label, 0);
                Grid.SetRow(label, i);
                this.Children.Add(label);

                label.SetBinding(Label.VisibilityProperty, new Binding("Visibility")
                {
                    Mode = BindingMode.OneWay,
                    Source = child
                });
            }
        }
    }

    public partial class Element
    {
        public static readonly DependencyProperty LabelProperty =
            DependencyProperty.RegisterAttached("Label",
                typeof(string), typeof(Element), new PropertyMetadata(string.Empty));

        public static object GetLabel(UIElement element)
        {
            return element.GetValue(LabelProperty);
        }

        // required
        public static void SetLabel(UIElement element, string value)
        {
            element.SetValue(LabelProperty, value);
        }
    }
}

用法示例：

<xy:LabelGrid>
    <TextBlock xy:Element.Label="Name : "
           Margin="0,0,10,0"
           HorizontalAlignment="Right"
           VerticalAlignment="Center"
           FontWeight="Bold"
           Text="{Binding Name}"
           TextWrapping="Wrap" />
    <TextBlock xy:Element.Label="Value 1"
           Margin="0,0,10,0"
           HorizontalAlignment="Right"
           VerticalAlignment="Center"
           FontWeight="Bold"
           Text="{Binding MyValue1}"
           TextWrapping="Wrap" />
    <TextBlock xy:Element.Label="Value 2"
           Margin="0,0,10,0"
           HorizontalAlignment="Right"
           VerticalAlignment="Center"
           FontWeight="Bold"
           Text="{Binding MyValue2}"
           TextWrapping="Wrap" />
</xy:LabelGrid>

Answer 3

只是尝试使用这个简单的例子。

MainWindow.xaml ：

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
<Grid>
    <ItemsControl ItemsSource="{Binding Entities}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="128"/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>
                    <TextBlock Text="{Binding Caption}" FontWeight="Bold" TextWrapping="Wrap" />
                    <TextBlock Text="{Binding Value}" Grid.Column="1" TextWrapping="Wrap" Margin="10,0,0,0"/>
                </Grid>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Grid>

MainWindow.xaml.cs ：

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        Entities = new ObservableCollection<YourEntity>()
        {
            new YourEntity{ Caption = "Name:", Value = "Test Name"},
            new YourEntity{ Caption = "Value1:", Value = "Test Value1"},
            new YourEntity{ Caption = "Value2:", Value = "Test Value2"}
        };

        this.DataContext = this;
    }

    public ICollection<YourEntity> Entities { get; private set; }
}

还有一个类YourEntity.cs ：

public class YourEntity
{
    public string Caption { get; set; }
    public object Value { get; set; }
}