2017-01-17 12 views
1

XamlスタイルのBasedOn属性を使用する際に問題が発生しています。私は例としてかなりシンプルなスタイルを作りました。Xamlスタイル継承が期待通りに機能しない

プロジェクトは2つのメインファイルで構成されています。 MainWindow.xamlおよびSquareButtonStyle.xaml。 SquareButtonStyleは、FontAwesome.WPFプロジェクトを使用して、すばやくイメージを取得します。

MainWindowは基本的に、内部にイメージとテキストを持つ一連のボタンです。

この例の目的は、3つの異なるボタンサイズを持つことです。 「中」のサイズと、中程度のサイズに基づいて「小」と「大」の2種類があります。

この問題は、大きな変形で最も簡単に見られます。中央のTextAlignment、Margin、およびRedテキストの色は、大きなものが基になっているミディアムスタイルから失われます。スタイルを継承するのではなく、特定のプロパティをオーバーライドする代わりに、私は代わりに既定のスタイルを継承し、プロパティをオーバーライドしているようです。

私は間違っていますか?これを訂正する唯一の方法は、BasedOnを気にすることではなく、設定されているプロパティの完全なリストを持つ3つの別々のスタイルを作ることです。これを回避する方法はありますか?

SquareButtonStyle.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 
    <Style TargetType="Button" x:Key="SquareButtonMediumStyle"> 
     <Setter Property="Margin" Value="5" /> 
     <Setter Property="Width" Value="80" /> 
     <Setter Property="Height" Value="80" /> 
     <Style.Resources> 
      <Style TargetType="StackPanel"> 
       <Setter Property="Orientation" Value="Vertical" /> 
       <Style.Resources> 
        <Style TargetType="TextBlock"> 
         <Setter Property="FontSize" Value="12" /> 
         <Setter Property="TextAlignment" Value="Center" /> 
         <Setter Property="Foreground" Value="Red"></Setter> 
         <Setter Property="TextWrapping" Value="Wrap" /> 
        </Style> 
       </Style.Resources> 
      </Style> 
     </Style.Resources> 
    </Style> 
    <Style BasedOn="{StaticResource SquareButtonMediumStyle}" TargetType="Button" x:Key="SquareButtonSmallStyle"> 
     <Setter Property="Width" Value="55" /> 
     <Setter Property="Height" Value="55" /> 
     <Style.Resources> 
      <Style TargetType="StackPanel"> 
       <Style.Resources> 
        <Style TargetType="TextBlock"> 
         <Setter Property="FontSize" Value="10" /> 
        </Style> 
       </Style.Resources> 
      </Style> 
     </Style.Resources> 
    </Style> 
    <Style BasedOn="{StaticResource SquareButtonMediumStyle}" TargetType="Button" x:Key="SquareButtonLargeStyle"> 
     <Setter Property="Width" Value="100" /> 
     <Setter Property="Height" Value="100" /> 
     <Style.Resources> 
      <Style TargetType="StackPanel"> 
       <Style.Resources> 
        <Style TargetType="TextBlock"> 
         <Setter Property="FontSize" Value="14" /> 
        </Style> 
       </Style.Resources> 
      </Style> 
     </Style.Resources> 
    </Style> 
</ResourceDictionary> 

MainWindow.xaml

<Window x:Class="XamlStyleExample.MainWindow" 
          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" 
          mc:Ignorable="d" 
          Title="MainWindow" Height="350" Width="525"> 
    <Window.Resources> 
     <ResourceDictionary> 
      <ResourceDictionary.MergedDictionaries> 
       <ResourceDictionary Source="SquareButtonStyle.xaml" /> 
      </ResourceDictionary.MergedDictionaries> 
     </ResourceDictionary> 
    </Window.Resources> 
    <StackPanel> 
     <WrapPanel> 
      <WrapPanel.Resources> 
       <Style BasedOn="{StaticResource SquareButtonMediumStyle}" TargetType="Button" /> 
      </WrapPanel.Resources> 
      <Button> 
       <StackPanel> 
        <TextBlock>Button 1</TextBlock> 
       </StackPanel> 
      </Button> 
      <Button> 
       <StackPanel> 
        <TextBlock>Button 2</TextBlock> 
       </StackPanel> 
      </Button> 
      <Button> 
       <StackPanel> 
        <TextBlock>Button 3</TextBlock> 
       </StackPanel> 
      </Button> 
     </WrapPanel> 
     <WrapPanel> 
      <WrapPanel.Resources> 
       <Style BasedOn="{StaticResource SquareButtonSmallStyle}" TargetType="Button" /> 
      </WrapPanel.Resources> 
      <Button> 
       <StackPanel> 
        <TextBlock>Button 1</TextBlock> 
       </StackPanel> 
      </Button> 
      <Button> 
       <StackPanel> 
        <TextBlock>Button 2</TextBlock> 
       </StackPanel> 
      </Button> 
      <Button> 
       <StackPanel> 
        <TextBlock>Button 3</TextBlock> 
       </StackPanel> 
      </Button> 
     </WrapPanel> 
     <WrapPanel> 
      <WrapPanel.Resources> 
       <Style BasedOn="{StaticResource SquareButtonLargeStyle}" TargetType="Button" /> 
      </WrapPanel.Resources> 
      <Button> 
       <StackPanel> 
        <TextBlock>Button 1</TextBlock> 
       </StackPanel> 
      </Button> 
      <Button> 
       <StackPanel> 
        <TextBlock>Button 2</TextBlock> 
       </StackPanel> 
      </Button> 
      <Button> 
       <StackPanel> 
        <TextBlock>Button 3</TextBlock> 
       </StackPanel> 
      </Button> 
     </WrapPanel> 
    </StackPanel> 
</Window> 

私は解決策を考え出したが、私は特にそれを好きではない、いくつかの答えに基づいて更新

。それは乱雑に思えます。

私は今、2つのキースタイルを持っています。 1つはStackPanel用、もう1つはTextBlock用です。

MainWindow.Xamlは同じままですが、SquaredButtonStyle.xamlは、今持っている:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 
    <Style TargetType="TextBlock" x:Key="SpecialTextBlockStyle"> 
     <Setter Property="TextAlignment" Value="Center" /> 
     <Setter Property="Foreground" Value="Red" /> 
     <Setter Property="TextWrapping" Value="Wrap" /> 
    </Style> 

    <Style TargetType="StackPanel" x:Key="MediumNestedStackPanel"> 
     <Style.Resources> 
      <Style TargetType="TextBlock" BasedOn="{StaticResource SpecialTextBlockStyle}" /> 
     </Style.Resources> 
    </Style> 

    <Style TargetType="Button" x:Key="SquareButtonMediumStyle"> 
     <Setter Property="Margin" Value="5" /> 
     <Setter Property="Width" Value="80" /> 
     <Setter Property="Height" Value="80" /> 
     <Style.Resources> 
      <Style TargetType="StackPanel" BasedOn="{StaticResource MediumNestedStackPanel}"> 
      </Style> 
     </Style.Resources> 
    </Style> 

    <Style BasedOn="{StaticResource SquareButtonMediumStyle}" TargetType="Button" x:Key="SquareButtonSmallStyle"> 
     <Setter Property="Width" Value="55" /> 
     <Setter Property="Height" Value="55" /> 
     <Style.Resources> 
      <!-- 
      Implicit stack panel style in the scope of SquareButtonMediumStyle 
      inherits from MediumNestedStackPanel, adds stuff 
      --> 
      <Style TargetType="StackPanel" BasedOn="{StaticResource MediumNestedStackPanel}"> 
       <Style.Resources> 
        <Style TargetType="TextBlock" BasedOn="{StaticResource SpecialTextBlockStyle}" > 
         <Setter Property="FontSize" Value="10" /> 
        </Style> 
       </Style.Resources> 
      </Style> 
     </Style.Resources> 
    </Style> 

    <Style BasedOn="{StaticResource SquareButtonMediumStyle}" TargetType="Button" x:Key="SquareButtonLargeStyle"> 
     <Setter Property="Width" Value="100" /> 
     <Setter Property="Height" Value="100" /> 
     <Style.Resources> 
      <Style TargetType="StackPanel" BasedOn="{StaticResource MediumNestedStackPanel}"> 
       <Style.Resources> 
        <Style TargetType="TextBlock" BasedOn="{StaticResource SpecialTextBlockStyle}"> 
         <Setter Property="FontSize" Value="14" /> 
        </Style> 
       </Style.Resources> 
      </Style> 
     </Style.Resources> 
    </Style> 
</ResourceDictionary> 
+0

だからSquareButtonMediumStyleは独自のリソースを持っているのStackPanelのスタイル、のリソースを持っています。それは、BasedOnを介してその所有者が期待する方法を継承することはありません。あなたの他のスタイルは完全に異なるStackPanelスタイルを持ちます。そのネストされたスタイルは継承する理由がありません。私はそのネストされたStackPanelスタイルのリソースを外部でキーで定義し、別のBasedOn階層を設定します。 –

答えて

1

これらのネストされたStackPanelスタイルが彼ら含むスタイルでBasedOn継承に関与するつもりはありません。理由の詳細については、以下のリンクを参照してください。あなたがそれをしたい場合は、ネストされたスタイルのために別々の継承階層を設定する必要があります:

<Style TargetType="StackPanel" x:Key="MediumNestedStackPanel"> 
    <Setter Property="Orientation" Value="Vertical" /> 
    <Style.Resources> 
     <Style TargetType="fa:ImageAwesome"> 
      <Setter Property="Height" Value="35" /> 
      <Setter Property="Margin" Value="5" /> 
     </Style> 
     <Style TargetType="TextBlock"> 
      <Setter Property="FontSize" Value="12" /> 
      <Setter Property="TextAlignment" Value="Center" /> 
      <Setter Property="Foreground" Value="Red"></Setter> 
      <Setter Property="TextWrapping" Value="Wrap" /> 
     </Style> 
    </Style.Resources> 
</Style> 

<Style TargetType="Button" x:Key="SquareButtonMediumStyle"> 
    <Setter Property="Margin" Value="5" /> 
    <Setter Property="Width" Value="80" /> 
    <Setter Property="Height" Value="80" /> 
    <Style.Resources> 
     <!-- 
     Implicit stack panel style in the scope of SquareButtonMediumStyle 
     inherits from MediumNestedStackPanel, adds nothing 
     --> 
     <Style 
      TargetType="StackPanel" BasedOn="{StaticResource MediumNestedStackPanel}" 
      /> 
    </Style.Resources> 
</Style> 

<Style BasedOn="{StaticResource SquareButtonMediumStyle}" TargetType="Button" x:Key="SquareButtonSmallStyle"> 
    <Setter Property="Width" Value="55" /> 
    <Setter Property="Height" Value="55" /> 
    <Style.Resources> 
     <!-- 
    Implicit stack panel style in the scope of SquareButtonMediumStyle 
    inherits from MediumNestedStackPanel, adds stuff 
    --> 
     <Style TargetType="StackPanel" BasedOn="{StaticResource MediumNestedStackPanel}"> 
      <Style.Resources> 
       <Style TargetType="fa:ImageAwesome" BasedOn="{StaticResource {x:Type fa:ImageAwesome}}"> 
        <Setter Property="Height" Value="20" /> 
       </Style> 
       <Style TargetType="TextBlock" BasedOn="{StaticResource {x:Type TextBlock}}"> 
        <Setter Property="FontSize" Value="10" /> 
       </Style> 
      </Style.Resources> 
     </Style> 
    </Style.Resources> 
</Style> 

<Style BasedOn="{StaticResource SquareButtonMediumStyle}" TargetType="Button" x:Key="SquareButtonLargeStyle"> 
    <Setter Property="Width" Value="100" /> 
    <Setter Property="Height" Value="100" /> 
    <Style.Resources> 
     <Style TargetType="StackPanel" BasedOn="{StaticResource MediumNestedStackPanel}"> 
      <Style.Resources> 
       <Style TargetType="fa:ImageAwesome" BasedOn="{StaticResource {x:Type fa:ImageAwesome}}"> 
        <Setter Property="Height" Value="60" /> 
        <Setter Property="Margin" Value="5" /> 
       </Style> 
       <Style TargetType="TextBlock" BasedOn="{StaticResource {x:Type TextBlock}}"> 
        <Setter Property="FontSize" Value="14" /> 
       </Style> 
      </Style.Resources> 
     </Style> 
    </Style.Resources> 
</Style> 
+0

このようにすると、私は別の動作を見ません。間違いがないように、コードをコピーしてコピーするようにしました。スモールスタイルのマージンとセンターの問題を確認するのは難しいですが、赤いテキストが適用されていないことがわかります。私はこれが部分的にmm8の回答に関連していると思うが、私はまだ理解していない。 – Rakshasas

+0

私はそれをテストする必要があります。 –

+0

@Rakshasasどうやって素晴らしいイメージが作れますか?ナゲット経由でFontAwesomeをインストールしましたが、何も定義されていません。 –

1

代わりにボタンのスタイル(S)内の暗黙のTextBlockのスタイルを定義するので、あなたがたFontSize、前景を設定する必要があり、...ボタンの要素自体の性質:

<Style TargetType="Button" x:Key="SquareButtonMediumStyle"> 
    <Setter Property="Margin" Value="5" /> 
    <Setter Property="Width" Value="80" /> 
    <Setter Property="Height" Value="80" /> 
    <Setter Property="FontSize" Value="12" /> 
    <Setter Property="TextBlock.TextAlignment" Value="Center" /> 
    <Setter Property="Foreground" Value="Red"></Setter> 
    <Setter Property="TextBlock.TextWrapping" Value="Wrap" /> 
    <Style.Resources> 
     <Style TargetType="StackPanel"> 
      <Setter Property="Orientation" Value="Vertical" /> 
     </Style> 
    </Style.Resources> 
</Style> 

<Style BasedOn="{StaticResource SquareButtonMediumStyle}" TargetType="Button" x:Key="SquareButtonLargeStyle"> 
    <Setter Property="Width" Value="100" /> 
    <Setter Property="Height" Value="100" /> 
    <Setter Property="FontSize" Value="14" /> 
</Style> 

すでに発見したとして、テキストブロックのための暗黙的なスタイルを使用してのあなたの現在のアプローチは機能しません。

Wpf, style is not being applied

+0

ありがとうございますが、私はあなたの拡大読書資料を理解するのに少し苦労しています。私はそれを実現することなく私の事例に別の問題を含めることがわかったからかもしれないと思う。 ImageAwesome Foregroundもなぜ赤でないのか知っていますか? – Rakshasas

関連する問題