次の方法で共有

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

惇人 矢川 40 評価のポイント
2024-12-13T06:21:46.0833333+00:00

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

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

Visual Studio
Visual Studio
Windows、Web、モバイル デバイス用のアプリケーションを構築するための統合開発ツールの Microsoft スイートのファミリ。
103 件の質問
0 件のコメント
承認済みの回答
  1. gekka 10,566 評価のポイント MVP
    2024-12-13T12:25:59.66+00:00

    内部のパーツの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>
    1 人がこの回答が役に立ったと思いました。

0 件の追加の回答

並べ替え方法: 最も役に立つ
最も役に立つ 新しい順 古い順

お客様の回答

回答は、質問作成者が [承諾された回答] としてマークできます。これは、ユーザーが回答が作成者の問題を解決したことを知るのに役立ちます。