2011-12-07 14 views
6

Non riesco a applicare uno stile MouseOver a un percorso all'interno di ContentPresenter.Applicazione dello stile a Path in ContentPresenter (BasedOn non funziona!)

Ho uno stile pulsante contenente un 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> 

Qui è uno stile di modo che io possa avere un effetto rollover sul Sentiero:

<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> 

Ho anche un file di risorse per le icone con una Viewbox che contiene un percorso:

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

E infine, creare un pulsante e assegnare il Vi ewbox risorsa al Contenuto:

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

L'uso di "BasedOn" per lo stile il contenuto della ContentPresenter è una tecnica che ho trovato qui:

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

Tuttavia, non funziona per me ... ho passato molte ore a cercare di capirlo!

Qualche idea?

Grazie!


OK basato sull'eccellente risposta di Mackho, ecco il mio XAML finale.

Ho anche aggiunto un DataTriggeer per IsPressed, che funziona benissimo!

Spero che questo aiuta qualcuno ...

In primo luogo, lo stile:

<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> 

Avanti, l'icona stessa:

<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> 

Quindi, il modello:

<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> 

E infine, poniamo un alcuni pulsanti che utilizzano il modello e lo stile:

<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> 

risposta

7

Il problema non è di "BasedOn", è possibile definire l'intero stile invece di utilizzo baseon e ancora non funziona.Hai solo bisogno di spostare il vostro stile di risorse ControlTemplate, e funzionerà di sicuro

 <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> 

A dire il vero non so perché non sta funzionando all'interno risorse ContentPresenter :)

Modifica

Se si desidera cambiare stile di percorso in base a pulsante passaggio del mouse è necessario associare IsMouseOver struttura al tasto uno e spostare il vostro stile di raccolta percorso all'interno, vedi sotto

 <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> 

E solo per farvi sapere, è piuttosto inutile basare uno stile ad un altro e aggiungere nulla, è possibile utilizzare:

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

Spero che questo aiuti

+0

+1, questo funziona sicuramente! A proposito, un'altra soluzione è quella di avvolgere la viewbox con un datatemplate e assegnarlo al contenttemplate del pulsante, non sono nemmeno sicuro del motivo per cui il contenuto vincolante non funziona. :( –

+0

Utilizzo di funziona per me! Un'altra domanda: in questo momento, il mouse-over funziona solo sul percorso stesso ... non sul pulsante della finestra di visualizzazione! Quindi il mio mouseover sfarfalla quando colpisce le parti C'è un modo per ottenere l'effetto mouseover quando il mouse passa sopra il pulsante, non solo il percorso? Grazie! – user1084857

+0

Ho modificato la mia risposta, vedere se funziona per voi – MaRuf

Problemi correlati