爲父元素上的鼠標懸停觸發

如果編寫了包含圖像和文本的按鈕usercontrol。爲父元素上的鼠標懸停觸發

當用戶將鼠標移動到按鈕上時，我想要對圖像產生影響。

現在我可以讓它在按鈕上起作用。

這是我到目前爲止有：

<Button x:Class="Example.Controls.MyButton" 
     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" 
     Name="MyButtonControl" 
     Margin="5" 
     HorizontalContentAlignment="Stretch" 
     VerticalContentAlignment="Stretch" 
     d:DesignHeight="80" 
     d:DesignWidth="120" 
     Style="{DynamicResource SomeButtonStyle}" 
     mc:Ignorable="d"> 
    <Button.Resources> 
     <ResourceDictionary> 
      <ResourceDictionary.MergedDictionaries> 
       <ResourceDictionary Source="Resources.xaml" /> 
       <ResourceDictionary> 
        <Style x:Key="SomeButtonStyle" 
          BasedOn="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" 
          TargetType="Button"> 
         <Style.Triggers> 
          <Trigger Property="Button.IsMouseOver" Value="True"> 
           <Setter Property="Button.Effect"> 
            <Setter.Value> 
             <DropShadowEffect BlurRadius="30" 
                  Opacity="100" 
                  ShadowDepth="0" 
                  Color="WhiteSmoke" /> 
            </Setter.Value> 
           </Setter> 
          </Trigger> 
         </Style.Triggers> 
        </Style> 
       </ResourceDictionary> 
      </ResourceDictionary.MergedDictionaries> 
     </ResourceDictionary> 
    </Button.Resources> 
    <Border HorizontalAlignment="Stretch" 
      VerticalAlignment="Stretch" 
      BorderBrush="SlateGray" 
      BorderThickness="1"> 
     <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="5*" /> 
       <RowDefinition Height="2*" /> 
      </Grid.RowDefinitions> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="3*" /> 
       <ColumnDefinition Width="9*" /> 
       <ColumnDefinition Width="3*" /> 
      </Grid.ColumnDefinitions> 

      <Image Grid.Row="0" 
        Grid.Column="1" 
        Margin="7" 
        HorizontalAlignment="Center" 
        VerticalAlignment="Stretch" 
        Source="{Binding ElementName=MyButtonControl, 
            Path=Image}" /> 

      <TextBlock Grid.Row="1" 
         Grid.Column="1" 
         Margin="2" 
         HorizontalAlignment="Center" 
         VerticalAlignment="Stretch" 
         Style="{DynamicResource MenuButtonText}" 
         Text="{Binding ElementName=MyButtonControl, 
             Path=Text}" /> 
     </Grid> 
    </Border> 
</Button>

現在我想要的效果，只是影響圖像，或圖像和文本可能。

這可以以某種方式實現嗎？

現在我正試圖讓圖像上的觸發器讓它在父級的mouseover上觸發。

這裏是testcode：

<Image Grid.Row="0" 
        Grid.Column="1" 
        Margin="7" 
        HorizontalAlignment="Center" 
        VerticalAlignment="Stretch" 
        Source="{Binding ElementName=ImageButtonControl, 
            Path=Image}"> 
       <Image.Style> 
        <Style> 
         <Style.Triggers> 
          <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=IsMouseOver}" Value="True"> 
           <Setter Property="Image.Effect"> 
            <Setter.Value> 
             <DropShadowEffect BlurRadius="30" 
                  Opacity="100" 
                  ShadowDepth="0" 
                  Color="WhiteSmoke" /> 
            </Setter.Value> 
           </Setter> 
          </DataTrigger> 
         </Style.Triggers> 
        </Style> 
       </Image.Style> 
      </Image>

但觸發不會改變任何東西......

來源

2013-07-04 Mare Infinitus

扳機工作，但你的Image.Effect是很難看到的。您是否嘗試過豐富的顏色進行測試？ – LPL

將其更改爲紅色進行檢查，謝謝。只是我的錯 –

的秒觸發工作

   <Image.Style> 
        <Style> 
         <Style.Triggers> 
          <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=IsMouseOver}" Value="True"> 
           <Setter Property="Image.Effect"> 
            <Setter.Value> 
             <DropShadowEffect BlurRadius="30" 
                  Opacity="100" 
                  ShadowDepth="0" 
                  Color="WhiteSmoke" /> 
            </Setter.Value> 
           </Setter> 
          </DataTrigger> 
         </Style.Triggers> 
        </Style> 
       </Image.Style>

來源

2013-07-05 15:59:40

你必須定義按鈕的外觀和感覺在ControlTemplate所以你能夠使用TargetName觸發器中的屬性來定位圖像控件。例如： -

<Button Width="200" Height="200"> 
      <Button.Template> 
       <ControlTemplate TargetType="Button"> 
        <Border HorizontalAlignment="Stretch" 
      VerticalAlignment="Stretch" 
      BorderBrush="SlateGray" 
      BorderThickness="1"> 
         <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> 
          <Grid.RowDefinitions> 
           <RowDefinition Height="5*" /> 
           <RowDefinition Height="2*" /> 
          </Grid.RowDefinitions> 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition Width="3*" /> 
           <ColumnDefinition Width="9*" /> 
           <ColumnDefinition Width="3*" /> 
          </Grid.ColumnDefinitions> 

          <Image x:Name="MyImage" Grid.Row="0" 
        Grid.Column="1" 
        Margin="7" 
        HorizontalAlignment="Center" 
        VerticalAlignment="Stretch" 
        Source="{Binding ElementName=MyButtonControl, 
            Path=Image}" /> 

          <TextBlock Grid.Row="1" 
         Grid.Column="1" 
         Margin="2" 
         HorizontalAlignment="Center" 
         VerticalAlignment="Stretch" 
         Text="{Binding ElementName=MyButtonControl, 
             Path=Text}" /> 
         </Grid> 
        </Border> 

        <ControlTemplate.Triggers> 
         <Trigger Property="Button.IsMouseOver" Value="True"> 
          <Setter Property="Button.Effect" TargetName="MyImage"> 
           <Setter.Value> 
            <DropShadowEffect BlurRadius="30" 
                  Opacity="100" 
                  ShadowDepth="0" 
                  Color="WhiteSmoke" /> 
           </Setter.Value> 
          </Setter> 
         </Trigger> 
        </ControlTemplate.Triggers> 

       </ControlTemplate> 
      </Button.Template> 
     </Button>

來源

2013-07-04 15:51:33 SvenG

謝謝！試圖在圖像中使用觸發器並在父元素的mouseover上觸發。你能看看編輯過的問題嗎？ –

你能看看更新後的問題嗎？ –

觸發器正在工作，WhiteSmoke只是很難看到。 –

爲父元素上的鼠標懸停觸發

回答

相關問題