AdaptiveTrigger and DataTemplate

Question

Will AdaptiveTrigger work in a DataTemplate?

That's my code i'm using to customize my ShellNavigation, it is working fine except the visual states. They will not trigger anything.

<shell:ShellHeadView x:Key="ShellHeadView_01">     <shell:ShellHeadView.ContentTemplate>         <DataTemplate>             <Grid Margin="20,0">                 <VisualStateManager.VisualStateGroups>                     <VisualStateGroup>                         <VisualState x:Name="GreenBackgroundVisualState">                             <VisualState.Setters>                                 <Setter Target="headViewLeft.Background" Value="Green" />                             </VisualState.Setters>                             <VisualState.StateTriggers>                                 <AdaptiveTrigger MinWindowWidth="1000"/>                             </VisualState.StateTriggers>                         </VisualState>                         <VisualState x:Name="OrangeBackgroundVisualState">                             <VisualState.Setters>                                 <Setter Target="headViewLeft.Background" Value="Orange" />                             </VisualState.Setters>                             <VisualState.StateTriggers>                                 <AdaptiveTrigger MinWindowWidth="2000"/>                             </VisualState.StateTriggers>                         </VisualState>                         <VisualState x:Name="RedBackgroundVisualState">                             <VisualState.Setters>                                 <Setter Target="headViewLeft.Background" Value="Red" />                             </VisualState.Setters>                             <VisualState.StateTriggers>                                 <AdaptiveTrigger MinWindowWidth="3000"/>                             </VisualState.StateTriggers>                         </VisualState>                     </VisualStateGroup>                 </VisualStateManager.VisualStateGroups>                 <Grid.ColumnDefinitions>                     <ColumnDefinition Width="Auto"/>                     <ColumnDefinition/>                 </Grid.ColumnDefinitions>                 <Grid Grid.Column="0" x:Name="headViewLeft" Width="100" Height="90">                  </Grid> 

Answer 1

Try wrapping your DataTemplate inside a UserControl like this -

<DataTemplate>     <UserControl>         <Grid>             <VisualStateManager.VisualStateGroups>             ...         </Grid>     </UserControl> </DataTemplate> 

---

Looks like any Control that has got a Content property will work. That's why UserControl works, so does a ContentControl.

So if you replace the UserControl with a ContentControl and give it an empty Style. It should work too.

<Style x:Key="EmptyContentControlStyle" TargetType="ContentControl">     <Setter Property="Template">         <Setter.Value>             <ControlTemplate TargetType="ContentControl" />         </Setter.Value>     </Setter> </Style>  <DataTemplate>     <ContentControl Style="{StaticResource EmptyContentControlStyle}">         <Grid>             <VisualStateManager.VisualStateGroups>             ...         </Grid>     </ContentControl> </DataTemplate>