web-dev-qa-db-ja.com

WPFのすべてのWindowsのボタンにスタイルを適用する

XAMLで、WPFウィンドウに丸いコーナーButtonsを作成するためのスタイル設定があります。このスタイルをアプリケーションのすべてのウィンドウのすべてのボタンに適用したいと思います。

CSSと同様に、これを別のファイルに入れてすべてのウィンドウで何らかの方法で参照する方法はありますか？または、毎回それをコピーして貼り付けるだけですか？.

wpfxamlbuttonstyles
32
PiousVenom

それにはアプリケーションリソースを使用できます。

次に例を示します（app.xaml内）

<Application.Resources>
  <Style TargetType="Button" x:Key="GelButton" >
     <Setter Property="Margin" Value="1,2,1,2"/>
     <Setter Property="HorizontalAlignment" Value="Left"/>
  </Style>
</Application.Resources>

そして、あなたのボタンのために（例えば）：

<Button Height="50" Width="250" Style="{StaticResource GelButton}" Content="Button 1" />
<Button Height="50" Width="250" Style="{StaticResource GelButton}" Content="Button 2" />

これがあなたが探しているものを見つけるのに役立つことを願っています。

38
Gauthier G. Letellier

きれいに実行したい場合は、WebデザインのCSSと同じ機能を持つResourceDictionary.xamlを作成できます。

まず、プロジェクトに移動してResourceDictionaryを追加します。その中に、必要なすべての要素のスタイルを追加できます。たとえば、すべてのボタンに適用されるButtonの背景色を変更できます。

// Base style for all buttons
<Style TargetType="Button">
    <Setter Property="Background" Value="Red" />
</Style>

各Styleに識別子を指定しない場合、そのスタイルは、指定したTargetTypeと一致するすべてのコントロールに適用されます。ボタンの外観を変えたい場合は、上記と同じようにできますが、スタイルごとに識別子を含めることもできます。これは、各ボタンで使用されます。

// Specific style for blue buttons
<Style TargetType="Button" x:Key="BlueButton">
    <Setter Property="Background" Value="Blue" />
</Style>

次に、スタイルを適用する.xamlごとに、作成しているこのResourceDictionary.xamlへの参照を追加する必要があります。

<Window.... >
    <Window.References>
        <ResourceDictionary>
           <ResourceDictionary Source="MyResourceDictionary.xaml" />
        </ResourceDictionary>
    </Window.References>

    <Grid>
       <Button Content="Button with red background" />
       <Button Style="{StaticResource BlueButton}" Content="Button with blue background" />
    </Grid>
</Window>

これがあなたが探しているものだと思います。

丸いボタンを描画する場合は、ボタンのTemplateプロパティをオーバーライドする必要があります。これは、オーバーライドした瞬間から必要なすべてのアクションをボタンに伝える必要があることを意味します。 here を参照してください。したがって、少し縮小された概念で、次のようなものを書きたいと思います。

<Style TargetType="Button">
    <Setter Property="SnapsToDevicePixels" Value="True" />
    <Setter Property="Foreground" Value="White" />
    <Setter Property="Background" Value="DarkBlue" />
    <Setter Property="Width" Value="150" />
    <Setter Property="Height" Value="35" />
    <Setter Property="FontSize" Value="16" />
    <Setter Property="FontFamily" Value="Calibri" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Background="{TemplateBinding Background}"
                    BorderBrush="LightBlue" BorderThickness="1" CornerRadius="15,0,15,0" x:Name="bd">
                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                    Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
                    SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" RecognizesAccessKey="True" />
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="bd" Property="Background" Value="LightGray"/>
                        <Setter Property="Foreground" Value="White" />
                        <Setter Property="Cursor" Value="Hand" />
                    </Trigger>

                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

ここで、Foreground、Background、Width...およびMouseOverイベントなど、基本的な機能ボタンを描画するために必要なすべての基本的なプロパティをオーバーライドします。マウスをその上に置くと色が変わります。 CornerRadius内のBorderのControlTemplateプロパティは、探している半径です。

したがって、基本的に、すべてのボタンにデフォルトで付属する境界線プロパティをオーバーライドしています。

64
Sonhja

Googleリファレンス辞書。すべてのスタイルをそこに配置できます。次に、ウィンドウ/ユーザーコントロールで「参照」を追加します。

    <UserControl.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="pack://application:,,,/SialTPChat.UI.Design;component/Styles/Styles.xaml" />
    </ResourceDictionary>
    </UserControl.Resources>

これで、上記で参照したXAMLファイルのすべてのスタイルが、ユーザーコントロールのすべてのオブジェクトに適用されます。

2
Jeff

私によると、最も簡単な方法は次のとおりです。

  1. デザイン画面のボタンを右クリックします

  2. [テンプレートの編集]-> [コピーの編集]を選択します

  3. 「アプリケーションで定義」ラジオボタンを選択します

  4. スタイルはApp.xamlファイルに作成されます

  5. 「style」タグを使用して、すべてのボタンにそのリソースを追加します

2
Bibaswann Bandyopadhyay