WPF按鈕圖像僅顯示在上次控件中

我對WPF來說相當陌生，可能在這裏錯過了一些簡單的東西。如果我有3個控件，只有最後一個控件會顯示我指定的OriginalImage。WPF按鈕圖像僅顯示在上次控件中

任何幫助將不勝感激。由於瑞安

主窗口

<Grid> 

     <Grid.RowDefinitions> 
      <RowDefinition Height="200*"/> 
      <RowDefinition Height="60" /> 
     </Grid.RowDefinitions> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="85" /> 
      <ColumnDefinition Width="85" /> 
      <ColumnDefinition Width="85" /> 
      <ColumnDefinition Width="85" /> 
      <ColumnDefinition Width="300" /> 
     </Grid.ColumnDefinitions> 

      <Grid Grid.Row="1"> 
       <but:ListButton OriginalImage="/CustomItemsPanel;component/ListBox/Images/add.png" 
          DisableImage="/CustomItemsPanel;component/ListBox/Images/addunselect.png" 

      /> 
     </Grid > 
     <Grid Grid.Row="1" Grid.Column="1" > 
      <but:ListButton OriginalImage="/CustomItemsPanel;component/ListBox/Images/add.png" 
          DisableImage="/CustomItemsPanel;component/ListBox/Images/addunselect.png" 

      /> 
     </Grid > 
     <Grid Grid.Row="1" Grid.Column="2" > 
      <but:ListButton OriginalImage="/CustomItemsPanel;component/ListBox/Images/add.png" 
          DisableImage="/CustomItemsPanel;component/ListBox/Images/addunselect.png" 

      /> 
     </Grid> 
</Grid>

控制XAML

<ResourceDictionary 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:local="clr-namespace:CustomItemsPanel.ListButton"> 

<LinearGradientBrush x:Key="ButtonBackground" EndPoint="0.5,1" StartPoint="0.5,0"> 
    <LinearGradientBrush.GradientStops> 
     <GradientStop Color="#FF0E3D70"/> 
     <GradientStop Color="#FF001832" Offset="1"/> 
    </LinearGradientBrush.GradientStops> 
</LinearGradientBrush> 

<LinearGradientBrush x:Key="ButtonBackgroundMouseOver" EndPoint="0.5,1" StartPoint="0.5,0"> 
    <LinearGradientBrush.GradientStops> 
     <GradientStop Color="#FF1E62A1" /> 
     <GradientStop Color="#FF0A3C6D" Offset="1"/> 
    </LinearGradientBrush.GradientStops> 
</LinearGradientBrush> 

<LinearGradientBrush x:Key="ButtonBackgroundSelected" EndPoint="0.5,1" StartPoint="0.5,0"> 
    <LinearGradientBrush.GradientStops> 
     <GradientStop Color="Red" /> 
     <GradientStop Color="#FF0A2A4C" Offset="1"/> 
    </LinearGradientBrush.GradientStops> 
</LinearGradientBrush> 

<Style x:Key="Toggle" TargetType="{x:Type Button}"> 
    <Setter Property="Content"> 
     <Setter.Value> 
      <Image> 
       <Image.Style> 
        <Style TargetType="{x:Type Image}"> 
         <Setter Property="Source" Value="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:ListButton}}, Path=OriginalImage}"/> 
         <Style.Triggers> 
          <Trigger Property="IsEnabled" Value="False"> 
           <Setter Property="Source" Value="{Binding Path=DisableImage, RelativeSource={RelativeSource TemplatedParent}}"/> 
          </Trigger> 
         </Style.Triggers> 
        </Style> 
       </Image.Style> 
      </Image> 
     </Setter.Value> 
    </Setter> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type Button}"> 
       <Grid Cursor="Hand"> 
         <Border Name="back" Margin="0,1,0,0" Background="{StaticResource ButtonBackground}"> 
         <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" x:Name="content" /> 

        </Border> 
         <Border BorderThickness="1" BorderBrush="#FF004F92"> 
          <Border BorderThickness="0,0,1,0" BorderBrush="#FF101D29" /> 
         </Border> 
        </Grid> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsMouseOver" Value="True" > 
         <Setter TargetName="back" Property="Background" Value="{StaticResource ButtonBackgroundMouseOver}"/> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

<Style TargetType="{x:Type local:ListButton}"> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type local:ListButton}"> 
       <Button Style="{StaticResource Toggle}" /> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

</ResourceDictionary>

控制代碼

public class ListButton : Control 
{ 
    public static readonly DependencyProperty MouseOverImageProperty; 
    public static readonly DependencyProperty OriginalImageProperty; 
    public static readonly DependencyProperty DisableImageProperty; 

    static ListButton() { 

     DefaultStyleKeyProperty.OverrideMetadata(typeof(ListButton), new FrameworkPropertyMetadata(typeof(ListButton))); 

     MouseOverImageProperty = DependencyProperty.Register("MouseOverImage", typeof(ImageSource), typeof(ListButton), new UIPropertyMetadata(null)); 
     OriginalImageProperty = DependencyProperty.Register("OriginalImage", typeof(ImageSource), typeof(ListButton), new UIPropertyMetadata(null)); 
     DisableImageProperty = DependencyProperty.Register("DisableImage", typeof(ImageSource), typeof(ListButton), new UIPropertyMetadata(null)); 
    } 

    public ImageSource MouseOverImage { 
     get { return (ImageSource)GetValue(MouseOverImageProperty); } 
     set { SetValue(MouseOverImageProperty, value); } 
    } 

    public ImageSource OriginalImage { 
     get { return (ImageSource)GetValue(OriginalImageProperty); } 
     set { SetValue(OriginalImageProperty, value); } 
    } 

    public ImageSource DisableImage 
    { 
     get { return (ImageSource)GetValue(DisableImageProperty); } 
     set { SetValue(DisableImageProperty, value); } 
    } 
}

來源

2010-05-24 Ryan

它真的總是隻有_last_有效嗎？如果你只有一個，它就可以工作;如果你有五個，只有第五個？儘管XAML看起來非常簡單，但我的第一個調試步驟可能是將該XAML簡化爲更簡單，例如只有一個具有三個ListButton的StackPanel。 – RwwL 2010-05-24 16:39:10

如果你有一個它的作品，如果你有5個，第五個圖像將是所示的一個。我試着只使用一個堆疊面板，並得到了相同的結果:( – Ryan 2010-05-24 17:47:47

後面我會回答我的問題。 Bitbonk對我做錯了什麼以及樣式如何工作有很好的解釋。謝謝！

<Style x:Key="Toggle" TargetType="{x:Type Button}"> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type Button}"> 
       <Grid Cursor="Hand"> 
        <Border Name="back" Margin="0,1,0,0" Background="{StaticResource ButtonBackground}"> 
         <Image Name="imgBut" Source="{Binding Path=(OriginalImage), RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:ListButton}}}" /> 
        </Border> 
        <Border BorderThickness="1" BorderBrush="#FF004F92"> 
         <Border BorderThickness="0,0,1,0" BorderBrush="#FF101D29" /> 
        </Border> 
       </Grid> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsMouseOver" Value="True" > 
         <Setter TargetName="back" Property="Background" Value="{StaticResource ButtonBackgroundMouseOver}"/> 
        </Trigger> 
        <Trigger Property="IsEnabled" Value="False" > 
         <Setter TargetName="imgBut" Property="Source" Value="{Binding Path=(DisableImage), RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:ListButton}}}" /> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style>

來源

2010-05-24 19:29:53 Ryan

這是因爲按鈕的「切換」風格。您在那裏使用的圖像只創建一次（因爲樣式只評估一次），並且圖像無法添加到多個按鈕（在WPF中，每個Visual只能有一個父級）。因此，您應用該樣式的最後一個按鈕會贏得並從上一個按鈕中盜取圖像。

如果您想在樣式中修改VisualTree，您應該在ControlTemplate中執行此操作。

來源

2010-05-24 19:32:09 bitbonk

感謝您爲我清除。 – Ryan 2010-05-25 12:26:49

WPF按鈕圖像僅顯示在上次控件中

回答

相關問題