WPFスタイルの使用
12965 ワード
1、スタイルの定義
スタイルの要素名はStyleで、TargetTypeによって作用するターゲットのタイプを宣言し、Setterによって作用するターゲットの属性を宣言し、1つのStyleに複数のSetterを追加することができ、コントロールでStyleのx:Key値を使用してこのスタイルを参照し、以下にボタンのスタイル定義を実現する.
1.1スタイルの定義
BasedOnプロパティ:BasedOnプロパティを設定することで、スタイルを継承できます.
1.2参照スタイル
2、スタイルの役割ドメイン
2.1グローバルスタイル
グローバルスタイル:スタイル要素をApp.xamlに書けばいいです.
2.2ローカルスタイル
2.3内部スタイル
上記のスタイル参照の方法は同じです.すべてResourcesを使用します.内部スタイルの使用は変更コントロール自体に限られています.これはリソース辞書に載っていないためです.xxx.Resourcesは継承をサポートし、リソースに定義されたスタイルを適用できます.たとえば、次のようにします.
3.2 MultiTrigger
MultiTriggerは誤解されやすい名前で、複数のTriggerが統合されていると思われますが、実際にはMultiConditionTriggerと呼ぶのが適切です.複数の条件が同時に成立しなければトリガーされないからです.MultiTriggerはTriggerよりConditions属性が1つ多く,同時に成立する条件がこの集合に格納される必要がある.
上記の例を少し変更して、CheckBoxが選択され、Contentが「私がこっそり来たように」になったときにトリガーされることを要求します.XAMLコードは以下の通りです.
3.3データによってトリガーされるData Trigger
プログラムでは、データに基づいて何らかの判断が行われることがよくあります.この場合、DataTriggerを使用することも考えられます.DataTriggerオブジェクトのBindingプロパティは、データソースを絶えず送信します.送信した値がValueプロパティと一致すると、DataTriggerがトリガーされます.
次の例では、TextBoxのText長が7文字未満の場合、Borderは赤色を保つ.XAMLコードは以下の通りです.
Converterを使用して、次のConverterを作成します.
Converter変換後、長さ値はboolタイプ値に変換されます.DataTriggerのValueはfalseに設定されています.つまり、TextBoxのテキスト長が7未満の場合、DataTriggerは自分のセットのSetterを使ってTextBoxの枠線を赤に設定します.
3.4多条件トリガのMultiDataTrigger
複数のデータ条件を同時に満たす必要がある場合に変化をトリガする必要がある場合があります.この場合、MultiDataTriggerを使用することも考えられます.例えば、ユーザインタフェースがListBoxを使用してStudioデータの列を表示し、StudioオブジェクトがID 2、NameがTomを同時に満たすと、エントリがハイライト表示され、XAMLコードは以下のようになります.
バックグラウンドコード:
3.5イベントによってトリガーされるEventTrigger
EventTriggerはトリガの中で最も特殊なものです.まず、属性値やデータの変化によってトリガーされるのではなく、イベントによってトリガーされます.次に、トリガーされた後、Setterのセットを適用するのではなく、アニメーションを実行します.したがって、UIレイヤのアニメーション効果は、EventTriggerに関連付けられることが多い.
次の例では、MouseEnterイベントによってトリガーされ、MouseLeaveイベントによってトリガーされる2つのEventTriggerを含むButton用のStyleが作成されます.XAMLコードは以下の通りです.
スタイルの要素名はStyleで、TargetTypeによって作用するターゲットのタイプを宣言し、Setterによって作用するターゲットの属性を宣言し、1つのStyleに複数のSetterを追加することができ、コントロールでStyleのx:Key値を使用してこのスタイルを参照し、以下にボタンのスタイル定義を実現する.
1.1スタイルの定義
BasedOnプロパティ:BasedOnプロパティを設定することで、スタイルを継承できます.
1.2参照スタイル
2、スタイルの役割ドメイン
2.1グローバルスタイル
グローバルスタイル:スタイル要素をApp.xamlに書けばいいです.
2.2ローカルスタイル
2.3内部スタイル
上記のスタイル参照の方法は同じです.すべてResourcesを使用します.内部スタイルの使用は変更コントロール自体に限られています.これはリソース辞書に載っていないためです.xxx.Resourcesは継承をサポートし、リソースに定義されたスタイルを適用できます.たとえば、次のようにします.
运行结果所示,XAML代码中的按钮除了Style="{StaticResource grid_button}"之外并没有声明任何属性,按钮的尺寸和内容都是通过应用父级Grid资源样式来呈现的,所以只要父级的对象定义了资源,父级以下的元素均可以访问它的资源字典。
3、Style中的Trigger
Trigger,触发器,即当某些条件满足时会触发一个行为(比如某些值的变化或动画的发生等)。触发器比较像事件。事件一般是由用户操作触发的,而触发器除了有事件触发型的EventTrigger外还有数据变化触发型的Trigger/DataTrigger及多条件触发型MultiTrigger/MultiDataTrigger等。
3.1 基本Trigger
Trigger类是最基本的触发器。类似于Setter,Trigger也有Property和Value这两个属性,Property是Trigger关注的属性名称,Value是触发条件。Trigger类还有一个Setters属性,此属性值是一组Setter,一旦触发条件被满足,这组Setter的“属性—值”就会被应用,触发条件不再满足后,各属性值会被还原。
下面这个例子中包含一个针对CheckBox的Style,当CheckBox的IsChecked属性为true的时候前景色和字体会改变。XAML代码如下:
3.2 MultiTrigger
MultiTriggerは誤解されやすい名前で、複数のTriggerが統合されていると思われますが、実際にはMultiConditionTriggerと呼ぶのが適切です.複数の条件が同時に成立しなければトリガーされないからです.MultiTriggerはTriggerよりConditions属性が1つ多く,同時に成立する条件がこの集合に格納される必要がある.
上記の例を少し変更して、CheckBoxが選択され、Contentが「私がこっそり来たように」になったときにトリガーされることを要求します.XAMLコードは以下の通りです.
3.3データによってトリガーされるData Trigger
プログラムでは、データに基づいて何らかの判断が行われることがよくあります.この場合、DataTriggerを使用することも考えられます.DataTriggerオブジェクトのBindingプロパティは、データソースを絶えず送信します.送信した値がValueプロパティと一致すると、DataTriggerがトリガーされます.
次の例では、TextBoxのText長が7文字未満の場合、Borderは赤色を保つ.XAMLコードは以下の通りです.
Converterを使用して、次のConverterを作成します.
using System;
using System.Windows.Data;
namespace WpfApplication1
{
public class L2BConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
int textLength = (int)value;
return textLength > 6 ? true : false;
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
}
}
Converter変換後、長さ値はboolタイプ値に変換されます.DataTriggerのValueはfalseに設定されています.つまり、TextBoxのテキスト長が7未満の場合、DataTriggerは自分のセットのSetterを使ってTextBoxの枠線を赤に設定します.
3.4多条件トリガのMultiDataTrigger
複数のデータ条件を同時に満たす必要がある場合に変化をトリガする必要がある場合があります.この場合、MultiDataTriggerを使用することも考えられます.例えば、ユーザインタフェースがListBoxを使用してStudioデータの列を表示し、StudioオブジェクトがID 2、NameがTomを同時に満たすと、エントリがハイライト表示され、XAMLコードは以下のようになります.
バックグラウンドコード:
///
/// MainWindow.xaml
///
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
List stuList = new List(){
new Student(){ID="1",Name="Peter",Age=25},
new Student(){ID="2",Name="Tom",Age=27},
new Student(){ID="3",Name="Ben",Age=20}
};
this.listBoxStudent.ItemsSource = stuList;
}
}
///
///
///
public class Student{
public string ID{get;set;}
public string Name { get; set; }
public int Age { get; set; }
}
3.5イベントによってトリガーされるEventTrigger
EventTriggerはトリガの中で最も特殊なものです.まず、属性値やデータの変化によってトリガーされるのではなく、イベントによってトリガーされます.次に、トリガーされた後、Setterのセットを適用するのではなく、アニメーションを実行します.したがって、UIレイヤのアニメーション効果は、EventTriggerに関連付けられることが多い.
次の例では、MouseEnterイベントによってトリガーされ、MouseLeaveイベントによってトリガーされる2つのEventTriggerを含むButton用のStyleが作成されます.XAMLコードは以下の通りです.