2011-12-07 4 views
6

ContentPresenter内のPathにMouseOverスタイルを適用できません。ContentPresenter内のパスにスタイルを適用する(BasedOn not working!)

私はのContentPresenterを含むボタンのスタイルを持っている:ここでは

<Style x:Key="ContentButton" TargetType="{x:Type Button}"> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type Button}"> 
       <ContentPresenter 
       x:Name="contentPresenter" 
       Content="{TemplateBinding Content}"> 
        <ContentPresenter.Resources> 
        <Style TargetType="{x:Type Path}" 
         BasedOn="{StaticResource ContentButtonPathStyle}"/> 
        </ContentPresenter.Resources> 
       </ContentPresenter> 

はので、私はパスにロールオーバー効果を持つことができるスタイルです。

<Style x:Key="ContentButtonPathStyle" TargetType="{x:Type Path}"> 
    <Style.Triggers> 
     <Trigger Property="IsMouseOver" Value="True"> 
      <Setter Property="Fill" Value="#FF00FF10"/> 
      <Setter Property="Stroke" Value="Red"/> 
      <Setter Property="StrokeThickness" Value="6"/> 
     </Trigger> 
    </Style.Triggers> 
    <Setter Property="Stroke" Value="Red"/> 
    <Setter Property="Fill"> 
     <Setter.Value> 
      <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
       <GradientStop Color="#FFB4B3E7" Offset="0"/> 
       <GradientStop Color="#FF0800FF" Offset="1"/> 
      </LinearGradientBrush> 
     </Setter.Value> 
    </Setter> 
</Style> 

私もアイコンのリソースファイルを持っていますビューボックスにパスが含まれています:

<Viewbox x:Key="MyIcon"> 
    <Grid> 
     <Path Data="M78,296 L37.5,306.5 45.5,354.5 123.5,343.5 z" /> 
    </Grid> 
</Viewbox> 

最後に、ボタンを作成してViを割り当てますコンテンツへewboxリソース:しかし、それは動作しません

http://social.msdn.microsoft.com/forums/en-US/wpf/thread/412b1747-60e9-4b9a-8f8f-bd56f3aff875/

<Button Style="{DynamicResource ContentButton}"> 
    <ContentPresenter Content="{DynamicResource MyIcon}"/> 
</Button> 

のContentPresenterの内容のスタイルを「BASEDON」の使用は、私がここで見つける手法であります私のために...私はこれを理解しようと多くの時間を費やしました!

アイデア?

ありがとうございます!


Mackhoの優れた答えに基づいて、ここに私の最終的なXAMLがあります。

また、IsPressedのDataTriggeerを追加しました。これは素晴らしい機能です!

私はこれが誰かの役に立てば幸い...

まず、スタイル:

<Style x:Key="ContentButtonPathStyle" TargetType="{x:Type Path}"> 
     <Style.Triggers> 
      <DataTrigger Binding="{Binding RelativeSource= 
       {RelativeSource Mode=FindAncestor, AncestorType={x:Type Button}}, Path=IsMouseOver}" Value="True"> 
       <Setter Property="Fill" Value="Yellow"/> 
       <Setter Property="Stroke" Value="Blue"/> 
      </DataTrigger> 
      <DataTrigger Binding="{Binding RelativeSource= 
       {RelativeSource Mode=FindAncestor, AncestorType={x:Type Button}}, Path=IsPressed}" Value="True"> 
       <Setter Property="Fill" Value="Red"/> 
       <Setter Property="Stroke" Value="Black"/> 
      </DataTrigger> 
     </Style.Triggers> 
     <Setter Property="Fill" Value="Green"/> 
     <Setter Property="Stroke" Value="Red"/> 
    </Style> 

次に、アイコン自体:次に

<Viewbox Stretch="Fill" x:Shared="False" x:Key="MyIcon"> 
     <Path StrokeThickness="6" Data="M160.26077,0.5 L196.5,36.739223 232.73923,0.5 251.12399,18.884777 214.88478,55.124001 251.12399,91.363222 232.73923,109.748 196.5,73.508779 160.26077,109.748 141.87601,91.363222 178.11522,55.124001 141.87601,18.884777 z" Stretch="Fill"/> 
    </Viewbox> 

、テンプレート:

<Style x:Key="ContentButton" TargetType="{x:Type Button}"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type Button}"> 
        <ControlTemplate.Resources> 
         <Style TargetType="{x:Type Path}" BasedOn="{StaticResource ContentButtonPathStyle}"/> 
        </ControlTemplate.Resources> 
        <Grid Background="Transparent"><ContentPresenter /></Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

最後に、テンプレートとスタイルを使用していくつかのボタン:問題は「BASEDON」に関するものではありません

<Grid> 
    <Button Style="{DynamicResource ContentButton}" HorizontalAlignment="Left" Width="128" Height="128" VerticalAlignment="Top" Margin="85.5,87,0,0"> 
     <ContentPresenter Content="{DynamicResource MyIcon}" d:IsLocked="True"/> 
    </Button> 
    <Button Style="{DynamicResource ContentButton}" Height="64" VerticalAlignment="Top" Margin="0,87,204.5,0" HorizontalAlignment="Right" Width="64"> 
     <ContentPresenter Content="{DynamicResource MyIcon}" d:IsLocked="True"/> 
    </Button> 
    <Button Style="{DynamicResource ContentButton}" Height="96" VerticalAlignment="Bottom" Margin="234,0,0,66.5" HorizontalAlignment="Left" Width="96"> 
     <ContentPresenter Content="{DynamicResource MyIcon}" d:IsLocked="True"/> 
    </Button> 
    <Button Style="{DynamicResource ContentButton}" Height="32" VerticalAlignment="Bottom" Margin="0,0,138.5,130.5" HorizontalAlignment="Right" Width="32"> 
     <ContentPresenter Content="{DynamicResource MyIcon}" d:IsLocked="True"/> 
    </Button> 
</Grid> 

答えて

7

、あなたが代わりに使用baseonの全体のスタイルを定義することができ、それはまだ動作しません。それは編集

のContentPresenter資源:)

内部の作業をされていない理由を私は知らないあなただけのControlTemplateリソースであなたの框を移動する必要があり、それは正直言ってわから

 <Style x:Key="ContentButton" TargetType="{x:Type Button}"> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type Button}"> 
         <ControlTemplate.Resources> 
          <Style TargetType="{x:Type Path}" BasedOn="{StaticResource ContentButtonPathStyle}"/> 
         </ControlTemplate.Resources> 
         <ContentPresenter x:Name="contentPresenter" Content="{TemplateBinding Content}"> 
         </ContentPresenter> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 

のために動作しますあなたがボタン1にismouseoverプロパティをバインドし、あなたのスタイル内のパスのコレクションを移動する必要があるボタンのマウスオーバーに基づくパスのスタイルを変更したい場合は、

 <Style x:Key="ContentButtonPathStyle" TargetType="{x:Type Path}"> 
      <Style.Triggers> 
       <DataTrigger Binding="{Binding RelativeSource= 
        {RelativeSource Mode=FindAncestor, AncestorType={x:Type Button}}, Path=IsMouseOver}" Value="True"> 
        <Setter Property="Fill" Value="#FF00FF10"/> 
        <Setter Property="Stroke" Value="Red"/> 
        <Setter Property="StrokeThickness" Value="6"/> 
       </DataTrigger> 
      </Style.Triggers> 
      <Setter Property="Stroke" Value="Red"/> 
      <Setter Property="Fill"> 
       <Setter.Value> 
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
         <GradientStop Color="#FFB4B3E7" Offset="0"/> 
         <GradientStop Color="#FF0800FF" Offset="1"/> 
        </LinearGradientBrush> 
       </Setter.Value> 
      </Setter> 
     </Style> 


     <Style x:Key="ContentButton" TargetType="{x:Type Button}"> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type Button}"> 
         <ContentPresenter x:Name="contentPresenter" /> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 


     <Viewbox x:Key="MyIcon"> 
      <Grid Background="Transparent"> 
       <Grid.Resources> 
        <Style TargetType="{x:Type Path}" BasedOn="{StaticResource ContentButtonPathStyle}"/> 
       </Grid.Resources> 
       <Path Data="M78,296 L37.5,306.5 45.5,354.5 123.5,343.5 z" /> 
      </Grid> 
     </Viewbox> 
の下

見ます

そして、ちょうどあなたが知るために、それはあなたが使用することができ、別のスタイルをベースと何も追加しないようにかなり無用です:

<Path Style="{StaticResource ContentButtonPathStyle}" Data="...." /> 

希望これは、

+0

+1を助け、これは間違いなく動作します! Btw、別の解決策は、ビューテンプレートをデータテンプレートでラップし、それをボタンのコンテンツテンプレートに割り当てることです。バインディングの内容がうまくいかない理由もわかりません。 : –

+0

を使用すると私のために働きます! もう1つの質問:今、マウスオーバーはPath自体でのみ有効です。ビューボックス/ボタンではありません! パスだけでなく、ボタンの上にマウスが移動したときにマウスオーバー効果が発生する方法はありますか? ありがとう! – user1084857

+0

私は自分の答えを編集しました。 – MaRuf