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
精彩评论