Question

假设我有一个类似于Expander的自定义控件，它将在该扩展器中显示多种类型的对象。我想为每种类型的对象定义一个DataTemplate。

现在，我希望在未展开时展示具体信息，并在展开时显示其他信息。

通常使用扩展器，它只显示绑定到Header属性的任何内容。

我能以某种方式为每个视图在DataTemplate中定义两个区域吗？

是否有其他一些出色的方法可以做到这一点？

Answer 1

试试这个：

<DataTemplate x:Key="ExpanderItemDataTemplate">
        <Grid x:Name="LayoutRoot">
            <Grid x:Name="ExpandedContent" />
            <Grid x:Name="CollapsedContent" />
        </Grid>
        <DataTemplate.Triggers>
            <DataTrigger Binding="{Binding IsExpanded, RelativeSource={RelativeSource AncestorType=local:YourCustomControl}}"
                         Value="True">
                <Setter Property="Visibility"
                        TargetName="ExpandedContent"
                        Value="Visible" />
                <Setter Property="Visibility"
                        TargetName="CollapsedContent"
                        Value="Collapse" />
            </DataTrigger>
            <DataTrigger Binding="{Binding IsExpanded, RelativeSource={RelativeSource AncestorType=local:YourCustomControl}}"
                         Value="False">
                <Setter Property="Visibility"
                        TargetName="ExpandedContent"
                        Value="Collapse" />
                <Setter Property="Visibility"
                        TargetName="CollapsedContent"
                        Value="Visible" />
            </DataTrigger>
        </DataTemplate.Triggers>

Answer 2

您是否考虑过只使用TabControl？例如，您可以添加两个选项卡并设置样式。以下是选项卡样式的代码：

    <Style TargetType="{x:Type TabPanel}">
        <!--Whatever you need for tab position (here center) -->
        <Setter Property="HorizontalAlignment" Value="Center" />
    </Style>

和

           <ControlTemplate x:Key="TabItemTemplate" TargetType="{x:Type TabItem}">
                <!-- Place whatever control you want for design (grid, dockpanel... -->
                <!-- And then the triggers you'd need for, here, color if selected or not, as an example -->
                <ControlTemplate.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter TargetName="Border" Property="Background" Value="Blue" />
                    </Trigger>
                    <Trigger Property="IsSelected" Value="False">
                        <Setter TargetName="Border" Property="Background" Value="WhiteSmoke" />
                    </Trigger>

                </ControlTemplate.Triggers>
            </ControlTemplate>

这是我想到的自然方式。例如，当您单击唯一可见选项卡时，可以将此代码扩展为添加触发器以更改所选选项卡。无论如何，您所描述的行为似乎更适合TabControl而不是Expander

XAML：为Expander中表示的ViewModel创建DataTemplate

2 个答案: