モノトーンの伝説日記

Apex Legends, Splatoon, Programming, and so on...

<mini> Windows Phone 8.1 (WinRT 1.3) 向け ToggleMenuFlyoutItem の Style

 デフォルトがチェックマークつかないので、Windows 版を元に作成。

 <!-- Default style for Windows.UI.Xaml.Controls.ToggleMenuFlyoutItem -->
    <Style
        TargetType="ToggleMenuFlyoutItem">
        <Setter
            Property="Background"
            Value="Transparent" />
        <Setter
            Property="Padding"
            Value="{ThemeResource MenuFlyoutItemThemePadding}" />
        <Setter
            Property="HorizontalContentAlignment"
            Value="Left" />
        <Setter
            Property="VerticalContentAlignment"
            Value="Center" />
        <Setter
            Property="Template">
            <Setter.Value>
                <ControlTemplate
                    TargetType="ToggleMenuFlyoutItem">
                    <Border
                        x:Name="LayoutRoot"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup
                                x:Name="CommonStates">
                                <VisualState
                                    x:Name="Normal" />
                                <VisualState
                                    x:Name="PointerOver" />
                                <VisualState
                                    x:Name="Pressed">
                                    <Storyboard>
                                        <PointerDownThemeAnimation
                                            Storyboard.TargetName="InnerBorder" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState
                                    x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames
                                            Storyboard.TargetName="CheckGlyph"
                                            Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame
                                                KeyTime="0"
                                                Value="{ThemeResource MenuFlyoutItemDisabledForegroundThemeBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames
                                            Storyboard.TargetName="TextBlock"
                                            Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame
                                                KeyTime="0"
                                                Value="{ThemeResource MenuFlyoutItemDisabledForegroundThemeBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualStateGroup.Transitions>
                                    <VisualTransition
                                        From="Pressed"
                                        To="PointerOver">
                                        <Storyboard>
                                            <PointerUpThemeAnimation
                                                Storyboard.TargetName="InnerBorder" />
                                        </Storyboard>
                                    </VisualTransition>
                                    <VisualTransition
                                        From="PointerOver"
                                        To="Normal">
                                        <Storyboard>
                                            <PointerUpThemeAnimation
                                                Storyboard.TargetName="InnerBorder" />
                                        </Storyboard>
                                    </VisualTransition>
                                    <VisualTransition
                                        From="Pressed"
                                        To="Normal">
                                        <Storyboard>
                                            <PointerUpThemeAnimation
                                                Storyboard.TargetName="InnerBorder" />
                                        </Storyboard>
                                    </VisualTransition>
                                </VisualStateGroup.Transitions>
                            </VisualStateGroup>
                            <VisualStateGroup
                                x:Name="CheckStates">
                                <VisualState
                                    x:Name="Unchecked" />
                                <VisualState
                                    x:Name="Checked">
                                    <Storyboard>
                                        <DoubleAnimation
                                            Storyboard.TargetName="CheckGlyph"
                                            Storyboard.TargetProperty="Opacity"
                                            To="1"
                                            Duration="0" />
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border
                            x:Name="InnerBorder">
                            <Grid
                                Margin="{TemplateBinding Padding}">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition
                                        Width="Auto" />
                                    <ColumnDefinition
                                        Width="*" />
                                </Grid.ColumnDefinitions>
                                <Path
                                    x:Name="CheckGlyph"
                                    Margin="0,0,10,0"
                                    Data="F1 M 0,58 L 2,56 L 6,60 L 13,51 L 15,53 L 6,64 z"
                                    Fill="{TemplateBinding Foreground}"
                                    Height="14"
                                    Stretch="Fill"
                                    Width="16"
                                    Opacity="0"
                                    FlowDirection="LeftToRight" />
                                <TextBlock
                                    x:Name="TextBlock"
                                    Grid.Column="1"
                                    Text="{TemplateBinding Text}"
                                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                            </Grid>
                        </Border>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

 App.xaml などに張り付けてご使用になってくだし。

 追記: スクショ針忘れた。こうなります。

f:id:mntone:20141004154256p:plain