XAML 如何确保不同控件中的列具有相同的大小?

mklgxw1f  于 2023-04-27  发布在  其他
关注(0)|答案(2)|浏览(115)

下面是我的代码:
LabelTexUserControl用户控件:

<UserControl x:Class="LabelDoubleTextBox.LabelTexUserControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:LabelDoubleTextBox"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid  IsSharedSizeScope="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" SharedSizeGroup="LabelGroup"/>
            <ColumnDefinition Width="Auto" SharedSizeGroup="ValueGroup"/>
        </Grid.ColumnDefinitions>
        <Label Grid.Column="0" Content="{Binding Label,RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:LabelTexUserControl}}}"  Margin="5"/>
        <Label Grid.Column="1" Content="{Binding Value,RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:LabelTexUserControl}}}" Margin="5" />
    </Grid>

</UserControl>

    public partial class LabelTexUserControl : UserControl
    {
        public LabelTexUserControl()
        {
            InitializeComponent();
        }

        public static readonly DependencyProperty LabelProperty = DependencyProperty.Register(
            nameof(Label), typeof(string), typeof(LabelTexUserControl), new PropertyMetadata(default(string)));

        public string Label
        {
            get { return (string)GetValue(LabelProperty); }
            set { SetValue(LabelProperty, value); }
        }

        public static readonly DependencyProperty ValueProperty = DependencyProperty.Register(
            nameof(Value), typeof(string), typeof(LabelTexUserControl), new PropertyMetadata(default(string)));

        public string Value
        {
            get { return (string)GetValue(ValueProperty); }
            set { SetValue(ValueProperty, value); }
        }
    }

MainWindowVM

public class MainWindowVM
{
    public string VMValue => "This is a value";
    public string Terrify => "Dont be terrify";
}

主窗口控件

<Window.DataContext>
        <local:MainWindowVM/>
    </Window.DataContext>
    <Grid IsSharedSizeScope="True">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <local:LabelTexUserControl Grid.Row="0" Label="My Label" Value="{Binding VMValue}"/>
        <local:LabelTexUserControl Grid.Row="1" Label="Warning...... but I am just super loooong... lalala" Value="{Binding Terrify}"/>
    </Grid>

请注意,根据不同Label(或Value)的长度是否一致,MainWindow在UI上看起来不会对齐。我尝试使用ShareSizeGroup,但显然它不能跨控件工作。
是否有任何方法可以修复上面的代码,使LabelValue列看起来一致,而不管我在MainWindow中定义了多少个LabelTextUserControl

qf9go6mv

qf9go6mv1#

如果您希望控件的不同示例共享相同的大小范围,则应该从LabelTexUserControl中删除IsSharedSizeScope="True"

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" SharedSizeGroup="LabelGroup"/>
        <ColumnDefinition Width="Auto" SharedSizeGroup="ValueGroup"/>
    </Grid.ColumnDefinitions>
    <Label Grid.Column="0" Content="{Binding Label,RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:LabelTexUserControl}}}"  Margin="5"/>
    <Label Grid.Column="1" Content="{Binding Value,RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:LabelTexUserControl}}}" Margin="5" />
</Grid>

mm9b1k5b

mm9b1k5b2#

你可以像下面这样动态设置列宽;

<Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="1*"/>
        </Grid.ColumnDefinitions>

这意味着总大小为%100,第一列为%50,第二列为%50。

相关问题