CODEWITHSUNDEEP
xamlwindows-10
DobriBala
DobriBala

Reputation: 132

windows 10 templated control and AdaptiveTrigger

How can I use AdaptiveTrigger in Templated Control in Windows 10 (I use Windows 10 Pro Insider Preview Build 10074). Window.Current.SizeChanged event do not fire up when window size change. What is proper way to make fluid control? Here is what I try to do, but nothing happens when change size of screen:

XAML template:
<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1">

    <Style TargetType="local:CustomControl1" >
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:CustomControl1">
                    <Border>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="VisualSizeStates">

                                <VisualState x:Name="Small">
                                    <VisualState.StateTriggers>
                                        <AdaptiveTrigger MinWindowHeight="0" MinWindowWidth="0" />
                                    </VisualState.StateTriggers>
                                    <VisualState.Setters>

                                        <Setter Target="Rect.Fill" Value="Green"/>

                                    </VisualState.Setters>
                                </VisualState>

                                <VisualState x:Name="Big">
                                    <VisualState.StateTriggers>
                                        <AdaptiveTrigger MinWindowHeight="1000" MinWindowWidth="1000" />

                                    </VisualState.StateTriggers>
                                    <VisualState.Setters>
                                        <Setter Target="Rect.Fill" Value="Blue"/>
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Rectangle x:Name="Rect" Fill="Red" />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

Upvotes: 5

Views: 1708

Answers (3)

GeorgiG
GeorgiG

Reputation: 1093

Please note that when you don't have a "Big" VisualState to trigger the default settings you will keep having the overwritten ones from the other VisualStates. Might be obvious, but it took some time for me to grasp it.

Upvotes: 0

Yuriy Pelekh
Yuriy Pelekh

Reputation: 308

The trick is that you have to put VisualStateManager with AdaptiveTrigger-s into root control of ControlTemplate otherwise it will not work.

Here is example:

Generic.xaml -->

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:AdaptiveLayoutExample">

    <Style TargetType="local:CustomControl1" >
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:CustomControl1">
                    <Grid x:Name="RootGrid">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup>
                                <VisualState>
                                    <VisualState.StateTriggers>
                                        <AdaptiveTrigger MinWindowWidth="0"/>
                                    </VisualState.StateTriggers>
                                    <VisualState.Setters>
                                        <Setter Target="RootGrid.Background" Value="Yellow"/>
                                        <Setter Target="MyGrid.Background" Value="White"/>
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState>
                                    <VisualState.StateTriggers>
                                        <AdaptiveTrigger MinWindowWidth="600"/>
                                    </VisualState.StateTriggers>
                                    <VisualState.Setters>
                                        <Setter Target="RootGrid.Background" Value="Gray"></Setter>
                                        <Setter Target="MyGrid.Background" Value="Red"></Setter>
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>

                        <Grid x:Name="MyGrid" Width="50" Height="50" Background="Black"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

MainPage.xaml -->

<Page
    x:Class="AdaptiveLayoutExample.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:AdaptiveLayoutExample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid>
        <local:CustomControl1 Width="100" Height="100"/>
    </Grid>
</Page>

Upvotes: 4

shady
shady

Reputation: 1106

I don't think AdaptiveTriggers works in a style like that. The only place I've got it to work is directly in a UserControl or a Grid inside a Page. I know for sure they don't work in a DataTemplate. The VisualStateManager must be before the controls content too I believe. Try a different approach like this:

        <!--in app.xaml or something-->
    <ControlTemplate x:Key="controlTemplate1" TargetType="MyControl">
        <Border Background="Green"/>
    </ControlTemplate>
    <ControlTemplate x:Key="controlTemplate2"  TargetType="MyControl">
        <Border Background="Blue"/>
    </ControlTemplate>

    <!--in your page-->
    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="visualStateGroup" >
                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="720" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="control.Template" Value="{StaticResource controlTemplate1}"/>
                    </VisualState.Setters>
                </VisualState>

                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="control.Template" Value="{StaticResource controlTemplate2}"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <MyControl x:Name="control" Template="{StaticResource controlTemplate1}"/>
    </Grid>

Not tested but let me know how that works out.

Upvotes: 2

Related Questions