开发者

XAML: Creating a DataTemplate for a ViewModel represented in an Expander

Let´s say I have a custom control similar to Expander and will be showing multiple types of objects in that expander. I want to define a DataTemplate for each type of object.

Now I want to show specific information when it's not expanded and something else when it is.

Normally with expander it only shows whatever is bound to the开发者_如何学Go Header property.

Can I somehow define two areas in the DataTemplate for each view?

Is there perhaps some other brilliant way to do this?


Try this:

<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>


Have you considered simply use a TabControl ? You could for example add two tabs and style them. Here is the code for tab styling:

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

and

           <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>

This is the natural way I'd think about it. You coult extend this code to, for example, add a trigger changing the selected tab when you click on the only visible tab. Anyway, the behavior you're describing seems more to fit with a TabControl than an Expander

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜