VB のたまご

作成日: 2017/03/07, 更新日: 2017/03/07



StyleとResource

  •  Style は、コントロールの初期設定を独自にカスタマイズできる仕組みです。 とりあえずどういう風に動くのか見てみましょう。 以下サンプルです。「StyleWindow1」という画面で作成していますが、「MainWindow」に書いても構いません。

  • スポンサーリンク


    <Window x:Class="StyleWindow1"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:local="clr-namespace:w05_WpfSystem"
            mc:Ignorable="d"
            Title="StyleWindow1" Height="300" Width="300">
       
        <StackPanel>
    
            <Button Content="button1" Margin="10">
                <Button.Style>
                    <Style TargetType="Button">
                        <Setter Property="Background" Value="Red" />
                    </Style>
                </Button.Style>
            </Button>
            
        </StackPanel>
        
    </Window>
    

  •  ボタンのスタイル設定は、複雑な設定になるので(文字列指定で完結できないため)子タグに記述します。 スタイル設定に限らず、WPF では複雑な設定は子タグに記述します。 ボタンの中に記述するのに、 Style に再度ターゲットとして Button を指定しないといけないのが少し面倒ですね。 その子タグにプロパティ名と設定値のペアを記述していますが、ターゲットとなるコントロールによってプロパティは違うので、識別するために再度ターゲットタイプに Button を指定します。 スタイル設定したボタンの背景色が「赤」に変わったら OK です。

  •  ところでこれ、普通のボタンに対して、背景色を「赤」にセットしたものとは違います(見た目は同じですが)。 以下はそのサンプルです。

  • <Window x:Class="StyleWindow2"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:local="clr-namespace:w05_WpfSystem"
            mc:Ignorable="d"
            Title="StyleWindow2" Height="300" Width="300">
        
        <StackPanel>
    
            <Button Content="button1" />
            <Button Content="button2" Background="Red" />
            
            <Button Content="button3">
                <Button.Style>
                    <Style TargetType="Button">
                        <Setter Property="Background" Value="Red" />
                    </Style>
                </Button.Style>
            </Button>
    
            <Button Content="button3" Background="Blue">
                <Button.Style>
                    <Style TargetType="Button">
                        <Setter Property="Background" Value="Red" />
                    </Style>
                </Button.Style>
            </Button>
    
        </StackPanel>
        
    </Window>
    

  •  ボタンが4つあります。 1つ目のボタンは何も設定していないデフォルトボタン、2つ目のボタンは背景色に「赤」を設定したボタン、3つ目は「背景色が赤のボタン」を配置して何も設定していないデフォルトボタン、 4つ目は「背景色が赤のボタン」を配置して背景色に「青」を設定したボタンです。

  •  どちらも背景色を変える設定ですが、スタイル設定(デフォルト値)よりもプロパティ設定の方が優先されます。 4つ目のボタンの背景色は「青」になっていますね。

  • スポンサーリンク


Resourceに記述してテンプレート化

  •  前述のサンプルでは、ボタン1つに付き1つスタイルを設定しました。 もしもたくさんのボタンに同じスタイルを適用させたいとなると、同じ内容を複数に記述しなくてはなりません。 メソッドだったら1本化して共通メソッドにしたいところです。

  •  そんな時は、Resource(リソース)に記述します。とりあえず見てみましょう。

  • <Window x:Class="StyleWindow3"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:local="clr-namespace:w05_WpfSystem"
            mc:Ignorable="d"
            Title="StyleWindow3" Height="300" Width="300">
    
        <StackPanel>
    
            <StackPanel.Resources>
                
                <Style TargetType="Button">
                    <Setter Property="Background" Value="Red" />
                </Style>
                
            </StackPanel.Resources>
    
            <Button Content="button1" />
            <Button Content="button2" Background="Red" />
    
            <Button Content="button3" />
            <Button Content="button4" Background="Blue" />
    
        </StackPanel>
    
    </Window>
    

  •  スタイルをリソースに記述すると、ターゲットにしたコントロール全てに対して適用されます。 このサンプルでは4つのボタン全てに(背景色「赤」が)適用されます。 ただ4つ目のボタンは直接背景色を「青」に設定しているので、結果、背景色は「青」が優先されます。

  •  適用範囲は記述した個所で決まります。例えばこのサンプルでは、StackPanel 内にリソースを記述したので適用範囲は StackPanel 内になります。

  • イメージ

  •  2つ目のサンプルでは、範囲はそれぞれ狭まります。

  • <Window x:Class="StyleWindow4"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:local="clr-namespace:w05_WpfSystem"
            mc:Ignorable="d"
            Title="StyleWindow4" Height="300" Width="300">
      
        <StackPanel>
    
            <StackPanel Margin="10">
                <StackPanel.Resources>
                    <Style TargetType="Button">
                        <Setter Property="Background" Value="Red" />
                    </Style>
                </StackPanel.Resources>
                <Button Content="button1" />
            </StackPanel>
    
            <StackPanel Margin="10">
                <StackPanel.Resources>
                    <Style TargetType="Button">
                        <Setter Property="Background" Value="Blue" />
                    </Style>
                </StackPanel.Resources>
                <Button Content="button1" />
            </StackPanel>
            
        </StackPanel>
        
    </Window>
    

    イメージ

  •  全てのボタンに強制適用させたくない場合は、スタイルに名前を付けて使います。

  • <Window x:Class="StyleWindow5"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:local="clr-namespace:w05_WpfSystem"
            mc:Ignorable="d"
            Title="StyleWindow5" Height="300" Width="300">
    
        <StackPanel>
    
            <StackPanel.Resources>
    
                <Style x:Key="ButtonStyle" TargetType="Button">
                    <Setter Property="Background" Value="Red" />
                </Style>
    
            </StackPanel.Resources>
    
            <Button Content="button1" />
            <Button Content="button2" Background="Red" />
    
            <Button Content="button3" Style="{StaticResource ButtonStyle}" />
            <Button Content="button4" Style="{StaticResource ButtonStyle}" Background="Blue" />
    
        </StackPanel>
        
    </Window>
    

  •  このサンプルでは、4つのボタンが配置されています。 1つ目と2つ目のボタンにはスタイルは適用されず、3つ目と4つ目のボタンにはスタイルを設定しているため、スタイルが適用されます。

  •  スタイルへの名前付けは、x:Key プロパティに設定します。ここでは「ButtonStyle」と名付けました。 スタイルを使う側(Button)は Style へ設定するわけですが、この時 {} で囲って設定します。 リソースに記述しているスタイルは静的なリソース(固定値)なので、StaticResource である ButtonStyle をセットするように記述します。

  •  一応ですが、スタイルは複数作成できますし、設定するプロパティも複数設定できます。

  • <Window x:Class="StyleWindow6"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:local="clr-namespace:w05_WpfSystem"
            mc:Ignorable="d"
            Title="StyleWindow6" Height="300" Width="300">
    
        <StackPanel>
    
            <StackPanel.Resources>
    
                <Style x:Key="ButtonRedStyle" TargetType="Button">
                    <Setter Property="Background" Value="Red" />
                    <Setter Property="FontSize" Value="24" />
                </Style>
    
                <Style x:Key="ButtonBlueStyle" TargetType="Button">
                    <Setter Property="Background" Value="Blue" />
                    <Setter Property="FontSize" Value="24" />
                    <Setter Property="FontStyle" Value="Italic" />
                </Style>
    
            </StackPanel.Resources>
    
            <Button Content="button1" />
            <Button Content="button2" Background="Red" />
    
            <Button Content="button3" Style="{StaticResource ButtonRedStyle}" />
            <Button Content="button4" Style="{StaticResource ButtonBlueStyle}" Background="Blue" />
    
        </StackPanel>
    
    </Window>
    

スタイルの継承

  •  スタイル設定は継承することが可能です。以下サンプルです。

  • <Window x:Class="StyleWindow7"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:local="clr-namespace:w05_WpfSystem"
            mc:Ignorable="d"
            Title="StyleWindow7" Height="300" Width="300">
    
        <StackPanel>
    
            <StackPanel.Resources>
    
                <Style TargetType="Button">
                    <Setter Property="FontSize" Value="24" />
                </Style>
    
                <Style x:Key="ButtonRedStyle" TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">
                    <Setter Property="Background" Value="Red" />
                </Style>
    
                <Style x:Key="ButtonBlueStyle" TargetType="Button" BasedOn="{StaticResource ButtonRedStyle}">
                    <Setter Property="Background" Value="Blue" />
                    <Setter Property="FontStyle" Value="Italic" />
                </Style>
    
            </StackPanel.Resources>
    
            <Button Content="button1" />
            <Button Content="button2" Style="{StaticResource ButtonRedStyle}" />
            <Button Content="button3" Style="{StaticResource ButtonBlueStyle}" />
            <Button Content="button4" Style="{StaticResource ButtonBlueStyle}" Background="Green" />
    
        </StackPanel>
    
    </Window>
    

  •  ボタンが4つ配置されています。 1つ目のボタンには、強制適用の「フォントサイズ24」が適用されます。 2つ目のボタンには、手動適用の「背景色「赤」」が適用されます、また BaseOn 属性により Button のスタイル設定を継承するため、「フォントサイズ24」もセットされています。 3つ目のボタンには、手動適用の「背景色「青」、フォントスタイルイタリック(斜め書体)」が適用されます。 また BaseOn 属性により ButtonRedStyle のスタイル設定を継承するため、「背景色「赤」、フォントサイズ24」もセットされています。 4つ目のボタンには、3つ目のボタンと同じプロパティが設定されますが、背景色を「緑」に設定しているため、こちらが優先され、背景色は「緑」にセットされます。