c# - 行で列を動的に変更して、WPF UserControl の外観が画面ごとに異なるようにする方法

Question

2 つのグリッドで構成される UserControl があります。

グリッドには横に並んだ 2 つの列があり、このグリッドは水平レイアウトになっています。列 0 には 1 つのデータがあり、列 1 には別のデータがあります。

このコントロールを表示する画面に応じてレイアウトを水平から垂直に変更できるようにする必要があるため、列 0 と 1 にデータを表示する代わりに、行 0 と行 1 にデータ。

これを達成するための最良の方法は何ですか？

ありがとうございました

Answer 1

StackPanel を使用して、プロパティOrientationを からHorizontalに変更してみてくださいVertical。

Answer 2

StackPanelが提供できる以上の制御が必要な場合は、これを使用ControlTemplatesして選択できます。DataTriggersこれが簡単な例です。

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（1つは水平用、もう1つは垂直用）とスタイルのDataTriggerです。