一個 UserControl WPF 的不同模板

Question

有人知道我該如何處理這個案子嗎？

我有 UserControl，我可以在其中將文本放在一列中，將照片放在第二列中。 但我需要能夠改變這兩個的順序。 實際上我需要三個狀態：

• 左邊的文本框/右邊的圖像
• 左邊的圖像/右邊的文本框
• 全寬文本框

我希望能夠從組合框中選擇一個選項。 這是一個設計示例：

這個 UserControl 也是另一個 UserControl 中的 ItemTemplate，所以當我添加這個 usercontrol 類型的對象時，它也會被添加到視圖中。 最好的方法是什么？

Answer 1

因為它無論如何都在數據模板中

    <DataTemplate>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <TextBox x:Name="TextElement" Grid.Column="0" Grid.ColumnSpan="1"/>
            <Image x:Name="ImageElement" Grid.Column="1"/>
        </Grid>
        <DataTemplate.Triggers>
            <DataTrigger Binding="{Binding SelectedLayout}" Value="{x:Static vm:Layout.ImageText}">
                <Setter TargetName="TextElement" Property="Grid.Column" Value="1"/>
                <Setter TargetName="ImageElement" Property="Grid.Column" Value="0"/>
            </DataTrigger>
            <DataTrigger Binding="{Binding SelectedLayout}" Value="{x:Static vm:Layout.TextOnly}">
                <Setter TargetName="TextElement" Property="Grid.ColumnSpan" Value="2"/>
                <Setter TargetName="ImageElement" Property="Visibility" Value="Collapsed"/>
            </DataTrigger>
        </DataTemplate.Triggers>
    </DataTemplate>

或作為用戶控件

    <UserControl x:Name="userControl" ...>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <TextBox Grid.Column="{Binding SelectedLayout, ElementName=userControl, Converter={StaticResource LayoutToColumnConverter}}"
                     Grid.ColumnSpan="{Binding SelectedLayout, ElementName=userControl, Converter={StaticResource LayoutToColumnSpanConverter}}"/>
            <Image Grid.Column="{Binding SelectedLayout, ElementName=userControl, Converter={StaticResource LayoutToColumnConverter}, ConverterParameter=invertedOrWhatever}"/>
        </Grid>
    </UserControl>



    <whatever:MyUserControl SelectedLayout="{Binding SelectedLayout, ElementName=LayoutCombobox}"/>