c# - 如何动态更改带有行的列，以便每个屏幕的 WPF UserControl 外观不同

Question

我有一个由两个网格组成的 UserControl。

网格中有两列并排，该网格具有水平布局。第 0 列有一个数据，第 1 列有另一个数据。

我需要让这个控件能够根据应该显示该控件的屏幕将布局从水平更改为垂直，因此现在应该显示第 0 行和第 1 行而不是让第 0 列和第 1 列显示数据数据。

实现这一目标的最佳方法是什么？

谢谢

Answer 1

尝试使用 StackPanel 并将属性Orientation从更改Horizontal为Vertical。

Answer 2

如果您想要比 StackPanel 更多的控制权，您可以使用ControlTemplates和DataTriggers选择它。这是一个快速n-dirty的例子。

请注意，您可以在不使用 UserControl 的情况下执行此操作。我只是停留在你的描述范围内。

用户控制

<UserControl>
    <UserControl.Resources>
        <ControlTemplate x:Key="usingColumns">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>

                <ListBox Grid.Column="0" ItemsSource="{Binding DataOneItems}" />
                <ListBox Grid.Column="1" ItemsSource="{Binding DataTwoItems}" />
            </Grid>

        </ControlTemplate>
        <ControlTemplate x:Key="usingRows">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>

                <ListBox Grid.Row="0" ItemsSource="{Binding DataOneItems}" />
                <ListBox Grid.Row="1" ItemsSource="{Binding DataTwoItems}" />
            </Grid>
        </ControlTemplate>
    </UserControl.Resources>
    <UserControl.Style>
        <Style>
            <Setter Property="UserControl.Template" Value="{StaticResource usingColumns}" />
            <Style.Triggers>
                <DataTrigger Binding="{Binding ShowVertically}" Value="true">
                    <Setter Property="UserControl.Template" Value="{StaticResource usingRows}" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </UserControl.Style>
</UserControl>

类绑定到用户控件：

public class UserControlData
{
    public ReadOnlyObservableCollection<DataTypeOne> DataOneItems
    {
        get
        {
            ObservableCollection<DataTypeOne> dataOneItems = new ObservableCollection<DataTypeOne>();
            for (int i = 1; i <= 3; i++)
                dataOneItems.Add(new DataTypeOne(i));

            return new ReadOnlyObservableCollection<DataTypeOne>(dataOneItems);
        }
    }

    public ReadOnlyObservableCollection<DataTypeTwo> DataTwoItems
    {
        get
        {
            ObservableCollection<DataTypeTwo> dataTwoItems = new ObservableCollection<DataTypeTwo>();
            for (int i = 1; i <= 3; i++)
                dataTwoItems.Add(new DataTypeTwo(i));

            return new ReadOnlyObservableCollection<DataTypeTwo>(dataTwoItems);
        }
    }

    public bool ShowVertically
    {
        get;
        set;
    }
}

虚拟数据类型（DataTypeOne 和 DataTypeTwo 相同，但类名不同）：

public class DataTypeOne
{
    private readonly int mId = 0;

    public DataTypeOne(int id)
    {
        mId = id;
    }

    public int ID
    {
        get { return mId; }
    }

    public override string ToString()
    {
        return String.Format("I am a DataTypeOne with ID {0}", mId.ToString("N"));
    }
}

关键是 ControlTemplates（一个用于水平，一个用于垂直）和 Style 上的 DataTrigger。