Windows 10 TPのUAPのSplitViewで閉じてるとき、開いてるときで見た目を変えたい

開いてるか閉じてるかでVisualStateを切り替えれることで実現できます。VisualStateの切り替え自体は、Behaviorを使って簡単に実現できます。ということでやってみましょう。

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

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Interactivity:Interaction.Behaviors>
                <Core:DataTriggerBehavior Binding="{Binding IsPaneOpen, ElementName=SplitView}" ComparisonCondition="Equal" Value="True">
                    <Core:GoToStateAction StateName="Opened" />
                </Core:DataTriggerBehavior>
                <Core:DataTriggerBehavior Binding="{Binding IsPaneOpen, ElementName=SplitView}" ComparisonCondition="Equal" Value="False">
                    <Core:GoToStateAction StateName="Closed" />
                </Core:DataTriggerBehavior>
            </Interactivity:Interaction.Behaviors>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="SplitViewState">
                <VisualState x:Name="Opened">
                    <VisualState.Setters>
                        <Setter Target="TextBlock.Text" Value="ひらいた" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Closed">
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <SplitView x:Name="SplitView" DisplayMode="CompactOverlay">
            <SplitView.Pane>
                <TextBlock x:Name="TextBlock"  Text="とじた" Style="{StaticResource HeaderTextBlockStyle}" />
            </SplitView.Pane>
            <ToggleButton IsChecked="{Binding IsPaneOpen, ElementName=SplitView, Mode=TwoWay}" Content="ひらく"/>
        </SplitView>
    </Grid>
</Page>