WPF(XAML)での継承先でControltemplate内のStyle.Triggersの追加

前提・実現したいこと

初めて投稿させて頂きます。
質問に際して至らぬ点ありましたら、ご指摘いただけると助かります。
よろしくお願い致します。

【質問内容】
WPFを利用して画面作成を行っています。
XAMLでの記述方法がわからなくて困っています。

やろうとしていることは、
● ControlTemplateを使用したTextBoxのスタイルを用意し(waterMark付・・・ネット上で調べて参考)、スタイルを継承
● 継承先ではStyle.Triggersを追加(特定の条件時にTextBoxのBackgroundを変える)

下記ソースでコメント部分をはずし継承をなくせば想定通りの挙動を示しますが、冗長化するのでベースを残して必要なところだけStyleの継承をして実現したい。

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

Style.Triggersで変更されない

該当のソースコード

    <Style x:Key="Watermark_TextBox" TargetType="{x:Type TextBox}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TextBox}">
                    <Grid Background="White">
                        <TextBox>
                            <TextBox.Resources>
                                <Style TargetType="{x:Type TextBox}">
                                    <Setter Property="BorderThickness" Value="2"></Setter>
                                    <!--
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding IsChecked, ElementName=radio1}" Value="True">
                                            <Setter Property="Background" Value="LightYellow" ></Setter>
                                        </DataTrigger>
                                    </Style.Triggers>
                                    -->
                                </Style>
                                <Style TargetType="{x:Type Border}">
                                    <Setter Property="CornerRadius" Value="5"/>
                                </Style>
                            </TextBox.Resources>
                        </TextBox>
                        <ScrollViewer x:Name="PART_ContentHost" Margin="5,0,10,0" VerticalAlignment="Center"/>
                        <TextBlock x:Name="waterMarkLabel" Text="{TemplateBinding Tag}" Opacity=".5" FontStyle="Italic"
                                   VerticalAlignment="Center" HorizontalAlignment="Right" Margin="5,0,10,0" Visibility="Collapsed"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="Text" Value="">
                            <Setter Property="Visibility" TargetName="waterMarkLabel" Value="Visible"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style BasedOn="{StaticResource Watermark_TextBox}" x:Key="TableFormatSelected_TextBox" TargetType="{x:Type TextBox}">
        <Style.Triggers>
            <DataTrigger Binding="{Binding IsChecked, ElementName=radio1}" Value="True">
                <Setter Property="Background" Value="LightYellow" ></Setter>
            </DataTrigger>
        </Style.Triggers>
    </Style>

試したこと

名前を付けたりKeyを設定してみたり試行錯誤してみましたが、うまくいきませんでした。

補足情報（FW/ツールのバージョンなど）

特になし

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

回答2件

ベストアンサー

コントロールテンプレートでそもそものコントロール要素が置き換わっているので、
Babkgroundプロパティをいじっても、見えている要素の背景色が変わらないのだと思われます。

「派生スタイルの方で、親スタイルのコントロールテンプレート内のTextBoxにアクセスする方法」が判ればよかったのですが、しばらく調べてもよくわからなかったので、
以下で代用してみましたがいかがでしょうか。

xaml
1<Application x:Class="WpfApplication1.App"
2             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4             xmlns:local="clr-namespace:WpfApplication1"
5             StartupUri="MainWindow.xaml">
6    <Application.Resources>
7        <Style x:Key="Watermark_TextBox" TargetType="{x:Type TextBox}">
8            <Setter Property="Template">
9                <Setter.Value>
10                    <ControlTemplate TargetType="{x:Type TextBox}">
11                        <Grid>
12                            <TextBox Background="{TemplateBinding Background}"> <!-- ★ここを修正 -->
13                                <TextBox.Resources>
14                                    <Style TargetType="{x:Type TextBox}" x:Name="hoge">
15                                        <Setter Property="BorderThickness" Value="2"></Setter>
16                                    </Style>
17                                    <Style TargetType="{x:Type Border}">
18                                        <Setter Property="CornerRadius" Value="5"/>
19                                    </Style>
20                                </TextBox.Resources>
21                            </TextBox>
22                            <ScrollViewer x:Name="PART_ContentHost" Margin="5,0,10,0" VerticalAlignment="Center"/>
23                            <TextBlock x:Name="waterMarkLabel" Text="{TemplateBinding Tag}" Opacity=".5" FontStyle="Italic"
24VerticalAlignment="Center" HorizontalAlignment="Right" Margin="5,0,10,0" Visibility="Collapsed"/>
25                        </Grid>
26                        <ControlTemplate.Triggers>
27                            <Trigger Property="Text" Value="">
28                                <Setter Property="Visibility" TargetName="waterMarkLabel" Value="Visible"/>
29                            </Trigger>
30                        </ControlTemplate.Triggers>
31                    </ControlTemplate>
32                </Setter.Value>
33            </Setter>
34        </Style>
35
36        <Style BasedOn="{StaticResource Watermark_TextBox}" x:Key="TableFormatSelected_TextBox" TargetType="{x:Type TextBox}">
37            <Style.Triggers>
38                <DataTrigger Binding="{Binding IsChecked, ElementName=radio1}" Value="True">
39                    <Setter Property="Background" Value="LightYellow" ></Setter>
40                </DataTrigger>
41            </Style.Triggers>
42        </Style>
43        
44    </Application.Resources>
45</Application>

本来のBackgroundプロパティの色をコントロールテンプレート内のTextBoxにバインドしてやりました。
これで、外からBackgroundプロパティをいじれば、コントロールテンプレート内のTextBoxの背景色も変わるというからくりです。

投稿2019/03/13 05:05

takabosoft

総合スコア8356

yamamoto_001

2019/03/13 07:23

ご回答ありがとうございます。頂いた対応で今直面している問題は解決できました。直接今回は関係ないですが、TemplateBindingを使用した方法ですと、例えば上記と同じトリガー条件の時に TextBoxのBorderのCornerRadiusを５→10にするのような仕様の時に外からのプロパティ変更方法はどのようにすればよろしいのでしょうか？以上、よろしくお願い致します。

takabosoft

2019/03/13 07:36

回答欄にも書きましたが、それがわからないんですよね～。カスタムクラスを作っちゃえば（プロパティでCornerRadiusを保持してそこにバインディングしてしまえば）なんでもありなんですが・・・。

yamamoto_001

2019/03/14 00:56

ご返答ありがとうございます。今回初めてWPFを使って実装を進めているのですが、 XAML記述以外でカスタムコントロールを作成したことがないので、仕様上必要になりましたら改めてトライしてみることにします。本当にありがとうございました。

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

● ControlTemplateを使用したTextBoxのスタイルを用意し(waterMark付・・・ネット上で調べて参考)、スタイルを継承

TextBoxのTemplateに、TextBoxを入れたりしてはいけません。
PART_ContentHostが本来の入力エリアですが、端のぎりぎりをクリックすると意図していないところに入力されます。
デザイナでコントロールを右クリックし「テンプレートの編集」ー「コピーして編集」で、既定のスタイルとテンプレートを出力すると参考になります。

● 継承先ではStyle.Triggersを追加(特定の条件時にTextBoxのBackgroundを変える)

TriggerでTextBoxのBackgroundを変えても、ControlTemplateで誰もBackground使っていません。
ControlTemplateで（何かに）TemplateBindingしてください。

xml
1<ControlTemplate TargetType="TextBox">
2  <Border Background="{TemplateBinding Background}">

スタイルとテンプレート - WPF .NET Framework | Microsoft Learn

直接今回は関係ないですが、TemplateBindingを使用した方法ですと、例えば上記と同じトリガー条件の時に
TextBoxのBorderのCornerRadiusを５→10にするのような仕様の時に外からのプロパティ変更方法はどのようにすればよろしいのでしょうか？

Setter.Propertyは、必ずしもTargetTypeの依存関係プロパティである必要はありません。
↓のような使い方ができます。

xml
1<Setter Property="Border.CornerRadius" Value="4" />
2<!--  省略  -->
3<Border CornerRadius="{TemplateBinding Border.CornerRadius}">

xml
1<Window
2  x:Class="Q179145.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  ThemeMode="System">
8  <Window.Resources>
9    <Style x:Key="Watermark_TextBox" TargetType="TextBox">
10      <Setter Property="Template">
11        <Setter.Value>
12          <ControlTemplate TargetType="TextBox">
13            <Grid Background="White">
14              <TextBox>
15                <TextBox.Resources>
16                  <Style TargetType="TextBox">
17                    <Setter Property="BorderThickness" Value="2" />
18
19                    <!--<Style.Triggers>
20                      <DataTrigger Binding="{Binding IsChecked, ElementName=radio1}" Value="True">
21                        <Setter Property="Background" Value="LightYellow" />
22                      </DataTrigger>
23                    </Style.Triggers>-->
24
25                  </Style>
26                  <Style TargetType="Border">
27                    <Setter Property="CornerRadius" Value="5" />
28                  </Style>
29                </TextBox.Resources>
30              </TextBox>
31              <ScrollViewer x:Name="PART_ContentHost" Margin="5,0,10,0" VerticalAlignment="Center" />
32              <TextBlock
33                x:Name="waterMarkLabel"
34                Margin="5,0,10,0"
35                VerticalAlignment="Center"
36                FontStyle="Italic"
37                Opacity=".5"
38                Text="{TemplateBinding Tag}"
39                Visibility="Collapsed" />
40            </Grid>
41            <ControlTemplate.Triggers>
42              <Trigger Property="Text" Value="">
43                <Setter TargetName="waterMarkLabel" Property="Visibility" Value="Visible" />
44              </Trigger>
45            </ControlTemplate.Triggers>
46          </ControlTemplate>
47        </Setter.Value>
48      </Setter>
49    </Style>
50
51    <Style x:Key="TableFormatSelected_TextBox" BasedOn="{StaticResource Watermark_TextBox}" TargetType="TextBox">
52      <Style.Triggers>
53        <DataTrigger Binding="{Binding IsChecked, ElementName=radio1}" Value="True">
54          <Setter Property="Background" Value="LightYellow" />
55        </DataTrigger>
56      </Style.Triggers>
57    </Style>
58
59
60    <Style x:Key="TextBoxStyle1" TargetType="TextBox">
61      <Setter Property="BorderThickness" Value="2" />
62      <Setter Property="Padding" Value="5,0" />
63      <Setter Property="Tag" Value="Watermark" />
64      <Setter Property="Border.CornerRadius" Value="5" />
65      <Setter Property="Template">
66        <Setter.Value>
67          <ControlTemplate TargetType="TextBox">
68            <Border
69              x:Name="border"
70              Background="{TemplateBinding Background}"
71              BorderBrush="{TemplateBinding BorderBrush}"
72              BorderThickness="{TemplateBinding BorderThickness}"
73              CornerRadius="{TemplateBinding Border.CornerRadius}"
74              SnapsToDevicePixels="True">
75              <Grid>
76                <ScrollViewer
77                  x:Name="PART_ContentHost"
78                  Focusable="False"
79                  HorizontalScrollBarVisibility="Hidden"
80                  VerticalScrollBarVisibility="Hidden" />
81                <TextBlock
82                  x:Name="waterMarkLabel"
83                  Margin="{TemplateBinding Padding}"
84                  VerticalAlignment="Center"
85                  FontStyle="Italic"
86                  Opacity="0.5"
87                  Text="{TemplateBinding Tag}"
88                  Visibility="Collapsed" />
89              </Grid>
90            </Border>
91            <ControlTemplate.Triggers>
92              <Trigger Property="Text" Value="">
93                <Setter TargetName="waterMarkLabel" Property="Visibility" Value="Visible" />
94              </Trigger>
95              <Trigger Property="IsEnabled" Value="False">
96                <Setter TargetName="border" Property="Opacity" Value="0.56" />
97              </Trigger>
98              <Trigger Property="IsMouseOver" Value="True">
99                <Setter TargetName="border" Property="BorderBrush" Value="#FF7EB4EA" />
100              </Trigger>
101              <Trigger Property="IsKeyboardFocused" Value="True">
102                <Setter TargetName="border" Property="BorderBrush" Value="#FF569DE5" />
103              </Trigger>
104            </ControlTemplate.Triggers>
105          </ControlTemplate>
106        </Setter.Value>
107      </Setter>
108    </Style>
109
110    <Style x:Key="TextBoxStyle2" BasedOn="{StaticResource TextBoxStyle1}" TargetType="TextBox">
111      <Style.Triggers>
112        <DataTrigger Binding="{Binding IsChecked, ElementName=radio1}" Value="True">
113          <Setter Property="Background" Value="LightYellow" />
114          <Setter Property="Border.CornerRadius" Value="10" />
115        </DataTrigger>
116      </Style.Triggers>
117    </Style>
118  </Window.Resources>
119
120  <StackPanel>
121    <CheckBox x:Name="radio1" />
122
123    <GroupBox Header="original">
124      <TextBox Style="{StaticResource TableFormatSelected_TextBox}" Tag="Watermark" />
125    </GroupBox>
126
127    <GroupBox Header="better">
128      <TextBox Style="{StaticResource TextBoxStyle1}" />
129    </GroupBox>
130
131    <GroupBox Header="BasedOn">
132      <TextBox Style="{StaticResource TextBoxStyle2}" />
133    </GroupBox>
134  </StackPanel>
135</Window>