Winui3 ToggleSwitchのConent位置のみを変えたい

Question

Windows11 24H2、Visual Stadio2022です。

ToggleSwitchについて

左にOn/OffContet、右にスイッチを置きたいと考えています。

これだけならFlowDirection="RightToLeft"と記述すれば実現できるのですが

左にOn/OffContet、右にスイッチを置き、ノブをON時は右側、OFF時は左側に動かすにはどうすればよいでしょうか。

generic.xamlのDefaultToggleSwitchStyleを持ってきて

<VisualState x:Name="Dragging" />
<VisualState x:Name="On">
     <Storyboard>
         <DoubleAnimation Storyboard.TargetName="KnobTranslateTransform"　Storyboard.TargetProperty="X" To="0" Duration="0" />
    </Storyboard>
</VisualState>
<VisualState x:Name="Off">
	<Storyboard>
    	<DoubleAnimation Storyboard.TargetName="KnobTranslateTransform"　Storyboard.TargetProperty="X" To="20" Duration="0" />
    </Storyboard>
</VisualState>

のように

<VisualState x:Name="On">のStoryboard.TargetProperty="X" To="0"

<VisualState x:Name="Off">のStoryboard.TargetProperty="X" To="20"

と改造し、ON/OFF時のノブの位置は指定できました。ですがこれだとクリック時にノブがスイッチの外側から入ってくるアニメーションが実行されてしまいます。（ノブの終着点はあっているが、アニメーションの向きが反対）

今試している方法の改善点、または別解はありますでしょうか。

Answer 1

内部のパーツのGrid.Columnを左右入れ替えるように配置しなおしてみる

<ControlTemplate x:Key="ts" TargetType="ToggleSwitch">
    <Grid   Background="{TemplateBinding Background}"
            BorderBrush="{TemplateBinding BorderBrush}"
            BorderThickness="{TemplateBinding BorderThickness}"
            CornerRadius="{TemplateBinding CornerRadius}">

        <VisualStateManager.VisualStateGroups>
              省略
         </VisualStateManager.VisualStateGroups>

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <ContentPresenter x:Name="HeaderContentPresenter"
                x:DeferLoadStrategy="Lazy"
                Grid.Row="0"
                Content="{TemplateBinding Header}"
                ContentTemplate="{TemplateBinding HeaderTemplate}"
                Foreground="{ThemeResource ToggleSwitchHeaderForeground}"
                IsHitTestVisible="False"
                Margin="{ThemeResource ToggleSwitchTopHeaderMargin}"
                TextWrapping="Wrap"
                VerticalAlignment="Top"
                Visibility="Collapsed"
                AutomationProperties.AccessibilityView="Raw" />
                    
        <!-- HorizontalAlignmentをRightに変更 -->
        <Grid Grid.Row="1" HorizontalAlignment="Right" VerticalAlignment="Top" >

            <Grid.RowDefinitions>
                <RowDefinition Height="{ThemeResource ToggleSwitchPreContentMargin}" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="{ThemeResource ToggleSwitchPostContentMargin}" />
            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="12" MaxWidth="12" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>

            <Grid x:Name="SwitchAreaGrid" Grid.RowSpan="3" Grid.ColumnSpan="3" Margin="0,5" CornerRadius="{TemplateBinding CornerRadius}" Control.IsTemplateFocusTarget="True" Background="{ThemeResource ToggleSwitchContainerBackground}" />

            <!-- Grid.Columnを2→0に変更 -->
            <ContentPresenter x:Name="OffContentPresenter"
                    Grid.RowSpan="3"
                    Grid.Column="0"
                    Opacity="0"
                    Foreground="{TemplateBinding Foreground}"
                    IsHitTestVisible="False"
                    Content="{TemplateBinding OffContent}"
                    ContentTemplate="{TemplateBinding OffContentTemplate}"
                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                    AutomationProperties.AccessibilityView="Raw" />

            <!-- Grid.Columnを2→0に変更 -->
            <ContentPresenter x:Name="OnContentPresenter"
                    Grid.RowSpan="3"
                    Grid.Column="0"
                    Opacity="0"
                    Foreground="{TemplateBinding Foreground}"
                    IsHitTestVisible="False"
                    Content="{TemplateBinding OnContent}"
                    ContentTemplate="{TemplateBinding OnContentTemplate}"
                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                    AutomationProperties.AccessibilityView="Raw" />

            <!-- Grid.Columnを0→2に変更 -->
            <Rectangle Grid.Column="2" x:Name="OuterBorder" Grid.Row="1" Height="20" Width="40" RadiusX="10" RadiusY="10" Fill="{ThemeResource ToggleSwitchFillOff}" Stroke="{ThemeResource ToggleSwitchStrokeOff}" StrokeThickness="{ThemeResource ToggleSwitchOuterBorderStrokeThickness}" />

            <!-- Grid.Columnを0→2に変更 -->
            <Rectangle Grid.Column="2" x:Name="SwitchKnobBounds" Grid.Row="1" Height="20" Width="40" RadiusX="10" RadiusY="10" Fill="{ThemeResource ToggleSwitchFillOn}" Stroke="{ThemeResource ToggleSwitchStrokeOn}" StrokeThickness="{ThemeResource ToggleSwitchOnStrokeThickness}" Opacity="0" />

            <!-- Grid.Columnを0→2に変更 -->
            <Grid Grid.Column="2" x:Name="SwitchKnob"
                    Grid.Row="1"
                    HorizontalAlignment="Left"
                    Width="20"
                    Height="20">
                <Border x:Name="SwitchKnobOn" Background="{ThemeResource ToggleSwitchKnobFillOn}" BorderBrush="{ThemeResource ToggleSwitchKnobStrokeOn}" BackgroundSizing="OuterBorderEdge" Width="12" Height="12" CornerRadius="7" Opacity="0" HorizontalAlignment="Center" Margin="0,0,1,0" RenderTransformOrigin="0.5, 0.5">
                    <Border.RenderTransform>
                        <CompositeTransform />
                    </Border.RenderTransform>
                </Border>
                <Rectangle x:Name="SwitchKnobOff" Fill="{ThemeResource ToggleSwitchKnobFillOff}" Width="12" Height="12" RadiusX="7" RadiusY="7" HorizontalAlignment="Center" Margin="-1,0,0,0" RenderTransformOrigin="0.5, 0.5">
                    <Rectangle.RenderTransform>
                        <CompositeTransform />
                    </Rectangle.RenderTransform>
                </Rectangle>
                <Grid.RenderTransform>
                    <TranslateTransform x:Name="KnobTranslateTransform" />
                </Grid.RenderTransform>
            </Grid>
                        
            <Thumb x:Name="SwitchThumb"
                    AutomationProperties.AccessibilityView="Raw"
                    Grid.RowSpan="3"
                    Grid.ColumnSpan="3">
                <Thumb.Template>
                    <ControlTemplate TargetType="Thumb">
                        <Rectangle Fill="Transparent" />
                    </ControlTemplate>
                </Thumb.Template>
            </Thumb>

        </Grid>

    </Grid>

</ControlTemplate>