wpfでON/OFF時の色を指定できるトグルボタンの横幅を広げたい。

前提

wpfのToggleButtonのON/OFF時の色を指定できるようしたいです。

環境は
visualstudio2022
wpfアプリ
.NET Framework 4.7.2
です。

実現したいこと

wpf初心者です。
wpfでChecked/UnCheckedの時の色を指定できるToggleButtonを作っているのですが、指定したWidthより小さい幅（表示する文字の幅）でしか表示されません。
Paddingで調節は可能なのですが、いちいち設定するわけにもいきません。
wpfの勉強を始めたばかりのためここで止まってしまっています。
よろしくお願いします。

発生している問題・エラーメッセージ

<ToggleButton ・・・ Width="XXX"・・・>で指定した幅にToggleButtonを表示したい。
現在は表示する文字列の幅でしか表示されない。



### 該当のソースコード
    <Window.Resources>
        <Style x:Key="ToggleButtonStyle1" TargetType="{x:Type ToggleButton}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ToggleButton}">
                        <Border HorizontalAlignment="Center" VerticalAlignment="Center" 
                                x:Name="border" Padding="10,5,10,5" CornerRadius="10,10,10,10" 
                                Background="#FF00FFFF" BorderBrush="#FF000000" 
                                BorderThickness="1,1,1,1" SnapsToDevicePixels="True" >
                            <ContentPresenter x:Name="contentPresenter"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsChecked" Value="true">
                                <Setter Property="Background" TargetName="border" Value="#FFC31010"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    
    
    <Grid>
        <StackPanel>
            <ToggleButton Name ="ToggleButton1" Content="ToggleButton" Margin="5" Width="200" Height="45" Style="{StaticResource ToggleButtonStyle1}"
                       Click="ToggleButton1_Click" />
        </StackPanel>
    </Grid>

1T2R3M4

2022/11/15 06:22

https://qiita.com/p_qGeff/questions/0fd88df7efe59cf92a77 以下ご対応ください。 https://teratail.com/help#posted-otherservice

p_qGeff

2022/11/15 08:11

削除ずみです。

行動規範の内容に同意します

回答1件

ベストアンサー

xml
1<Border HorizontalAlignment="Center" VerticalAlignment="Center">

これではBorderごと中央に寄ってしまい、回りに余白ができてしまいます。

xml
1<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center">

付けるのはContentPresenterのほうです。

xml
1<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">

とするほうがより気が利いているかもしれません。

個人的にはWidth・Heightは極力入れずに、MinWidth・MinHeightで済ませています（ユーザーのフォント設定によっては見切れたりします）

xml
1<Window
2  x:Class="Qve323gk2s1zk9e.MainWindow"
3  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5  Width="800"
6  Height="450">
7  <Window.Resources>
8    <!--  オリジナル（状態がわかりやすいようにGridで囲み色を付けた）  -->
9    <Style x:Key="ToggleButtonStyle1" TargetType="{x:Type ToggleButton}">
10      <Setter Property="Template">
11        <Setter.Value>
12          <ControlTemplate TargetType="{x:Type ToggleButton}">
13            <Grid Background="LightGray">
14              <Border
15                x:Name="border"
16                Padding="10,5"
17                HorizontalAlignment="Center"
18                VerticalAlignment="Center"
19                Background="#0FF"
20                BorderBrush="#000"
21                BorderThickness="1"
22                CornerRadius="10"
23                SnapsToDevicePixels="True">
24                <ContentPresenter x:Name="contentPresenter" />
25              </Border>
26            </Grid>
27            <ControlTemplate.Triggers>
28              <Trigger Property="IsChecked" Value="True">
29                <Setter TargetName="border" Property="Background" Value="#C31010" />
30              </Trigger>
31            </ControlTemplate.Triggers>
32          </ControlTemplate>
33        </Setter.Value>
34      </Setter>
35    </Style>
36
37    <!--  修正版  -->
38    <Style x:Key="ToggleButtonStyle" TargetType="{x:Type ToggleButton}">
39      <Setter Property="Padding" Value="10,5" />
40      <Setter Property="Template">
41        <Setter.Value>
42          <ControlTemplate TargetType="{x:Type ToggleButton}">
43            <Border
44              x:Name="border"
45              Background="#0FF"
46              BorderBrush="#000"
47              BorderThickness="1"
48              CornerRadius="10"
49              SnapsToDevicePixels="True">
50              <ContentPresenter
51                x:Name="contentPresenter"
52                Margin="{TemplateBinding Padding}"
53                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
54                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
55                Focusable="False"
56                RecognizesAccessKey="True"
57                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
58            </Border>
59            <ControlTemplate.Triggers>
60              <Trigger Property="IsChecked" Value="True">
61                <Setter TargetName="border" Property="Background" Value="#C31010" />
62              </Trigger>
63            </ControlTemplate.Triggers>
64          </ControlTemplate>
65        </Setter.Value>
66      </Setter>
67    </Style>
68  </Window.Resources>
69
70  <Grid>
71    <StackPanel>
72      <!--  ノーマル  -->
73      <ToggleButton
74        Width="200"
75        Height="45"
76        Margin="5"
77        Content="ToggleButton(_1)" />
78
79      <!--  オリジナル（状態がわかりやすいようにGridで囲み色を付けた）  -->
80      <ToggleButton
81        Width="200"
82        Height="45"
83        Margin="5"
84        Content="ToggleButton(_2)"
85        Style="{StaticResource ToggleButtonStyle1}" />
86
87      <!--  修正版  -->
88      <ToggleButton
89        Width="200"
90        Height="45"
91        Margin="5"
92        Content="ToggleButton(_3)"
93        Style="{StaticResource ToggleButtonStyle}" />
94
95      <!--  見切れ再現  -->
96      <ToggleButton
97        Width="200"
98        Height="45"
99        Margin="5"
100        Content="ToggleButton"
101        FontSize="36"
102        Style="{StaticResource ToggleButtonStyle}" />
103
104      <!--  MinWidth・MinHeight  -->
105      <ToggleButton
106        MinWidth="200"
107        MinHeight="45"
108        Margin="5"
109        HorizontalAlignment="Center"
110        Content="ToggleButton"
111        FontSize="36"
112        Style="{StaticResource ToggleButtonStyle}" />
113    </StackPanel>
114  </Grid>
115</Window>

投稿2022/11/15 09:12

編集2023/07/30 13:55

TN8001

総合スコア10022

p_qGeff

2022/11/15 09:31

丁寧な回答をどうもありがとうございました。理解、納得しました。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.31%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

wpfでON/OFF時の色を指定できるトグルボタンの横幅を広げたい。

前提

実現したいこと

発生している問題・エラーメッセージ

関連した質問