如何创建一个更改源图像和WPF中StackPanel中文本颜色的按钮？

Question

在我的WPF网络应用程序中，我有一个图像和一个文本块内的堆栈面板，制作一个按钮。我已经设置好了，如果我mouseOver图像，它会更改图像的来源，以便出现另一个图像（相同的图像，但灰色）。另外，如果mouseOver文本块的文本颜色从黑色变为灰色。如果鼠标滑过或者通过容纳物品的StackPanel，我该如何同时发生这两种情况？我的代码：

<StackPanel x:Name="IntegrationRequestLinkStackPanel"> 
    <Button x:Name="IntegrationRequestLinkButton" Content="Integration Request"> 
     <Button.Template> 
      <ControlTemplate> 
       <Image> 
        <Image.Style> 
         <Style TargetType="{x:Type Image}"> 
          <Setter Propery="Source" Value+"Images/requestNew.png" /> 
          <Setter Property="Cursor" Value="Hand" /> 
          <Style.Triggers> 
           <Trigger Property="IsMouseOver" Value="True"> 
            <Setter Property="Source" Value="Images"requestNewBW.png" /> 
           </Trigger> 
          </Style.Trigger> 
          </Style> 
         </Image.Style> 
        </Image> 
      </ControlTemplate> 
     </Button> 
     </Button> 
     <Textblock Text="Integration Request"............ 

Textblock的代码与按钮几乎相同。真的，我希望整个堆栈面板成为按钮，而当mouseOver中的图像发生变化并且文本颜色发生变化时。

Answer 1

您描述的方式，你需要一个图像和标签作为其内容的按钮。您可以将两者都放在模板中。

<Button x:Name="IntegrationRequestLinkButton" 
     Content="Integration Request"> 
    <Button.Style> 
    <Style TargetType="Button"> 
     <Setter Property="Foreground" Value="Black" /> 
     <Setter Property="Cursor" Value="Hand" /> 
     <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="Button"> 
      <DockPanel LastChildFill="True"> 
       <Image x:Name="Icon" 
        DockPanel.Dock="Left" 
        Stretch="None" 
        Margin="0,0,5,0" 
        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
        VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
        Source="Images/requestNew.png" /> 
       <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
           VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
      </DockPanel> 
      <ControlTemplate.Triggers> 
       <Trigger Property="IsMouseOver" Value="True"> 
       <Setter TargetName="Icon" 
         Property="Source" 
         Value="Images/requestNewBW.png" /> 
       </Trigger> 
      </ControlTemplate.Triggers> 
      </ControlTemplate>    
     </Setter.Value> 
     </Setter> 
     <Style.Triggers> 
     <Trigger Property="IsMouseOver" Value="True"> 
      <Setter Property="Foreground" Value="Gray" /> 
     </Trigger>   
     </Style.Triggers> 
    </Style> 
    </Button.Style> 
</Button> 

典型地，一个调节其适用于使用在Style触发器而不是在Template整个控制（像Foreground）继承属性。当您需要更改模板定义的特定元素时，使用模板触发器。

作为一个风格问题，它似乎很奇怪，你想显示黑色文本和默认的彩色图像，和灰色文字和鼠标悬停的灰度图像。我希望你想要相反。

Answer 2

首先，我不确定你的意思是“WPF web app”。如果您的意思是Silverlight，我只在桌面应用程序中测试过这些代码，所以您的结果可能会有所不同。

如果你想整个事情（图片+文字）是一个按钮，我会说，最好的办法是让按钮的StackPanel的模板，而不是周围的其他方式。下面是一些代码：

<Button> 
    <Button.Template> 
     <ControlTemplate TargetType="Button"> 
      <Border Background="Transparent"> 
       <StackPanel> 
        <Image x:Name="buttonImage" 
          Width="30" Height="30" 
          Source="Images/requestNew.png"></Image> 
        <TextBlock x:Name="buttonText" 
           Text="Integration Request"></TextBlock> 
       </StackPanel> 
      </Border> 
      <ControlTemplate.Triggers> 
       <Trigger Property="IsMouseOver" Value="True"> 
        <Setter TargetName="buttonImage" 
          Property="Source" Value="Images/requestNewBW.png"></Setter> 
        <Setter TargetName="buttonText" 
          Property="Foreground" Value="Red"></Setter> 
       </Trigger> 
      </ControlTemplate.Triggers> 
     </ControlTemplate> 
    </Button.Template> 
</Button> 

所以，这是包含了图像的StackPanel模板，文本块一个按钮，改变你当鼠标移动到按钮的任何部分

你会发现我添加了具有透明背景的网格。您可以将其删除，它所做的是使按钮的整个矩形区域触发IsMouseOver属性的更改（如果它不在那里，只会在鼠标悬停在图像或文本本身上时触发）。