WPF - Come creare un pulsante immagine con modello

Question

Sto provando a creare un pulsante con 3 immagini: un'immagine normale, un'immagine premuta e un'immagine disabilitata (le userò per creare pulsanti freccia su/giù).

Credo che l'approccio corretto sarebbe derivare da Button e utilizzare un Template e impostare i trigger per modificare l'immagine. Ho 3 proprietà di dipendenza, una per ogni immagine.

Le immagini dovrebbero essere .png e avere sfondi trasparenti (poiché non sono rettangolari).

Sto cercando qualcosa come CBitmapButton in MFC.

Answer 1

Non avrete bisogno di proprietà di dipendenza perché ereditate da Button. Hai già le proprietà IsPressed e IsEnabled. In realtà, questo è tutto ciò che serve:

<Button x:Class="TestWpfApplication.ThreeStateImageButton" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 
    <Button.Template> 
     <ControlTemplate TargetType="{x:Type Button}"> 
     <Grid> 
      <Image Name="Normal" Source="Resources/Normal.png"/> 
      <Image Name="Pressed" Source="Resources/Pressed.png" Visibility="Hidden"/> 
      <Image Name="Disabled" Source="Resources/Disabled.png" Visibility="Hidden"/> 
     </Grid> 
     <ControlTemplate.Triggers> 
      <Trigger Property="IsPressed" Value="True"> 
       <Setter TargetName="Normal" Property="Visibility" Value="Hidden"/> 
       <Setter TargetName="Pressed" Property="Visibility" Value="Visible"/> 
      </Trigger> 
      <Trigger Property="IsEnabled" Value="False"> 
       <Setter TargetName="Normal" Property="Visibility" Value="Hidden"/> 
       <Setter TargetName="Disabled" Property="Visibility" Value="Visible"/> 
      </Trigger> 
     </ControlTemplate.Triggers> 
     </ControlTemplate> 
    </Button.Template> 
</Button> 

Con l'UserControl file code-behind:

public partial class ThreeStateImageButton : Button 
{ 
    public ThreeStateImageButton() 
    { 
     InitializeComponent(); 
    } 
} 

Answer 2

Ho fornito un'alternativa a questa soluzione, il suo peso non proprio come la luce, ma offre molto di maggiore riutilizzabilità.

WPF TriState Image Button

Answer 3

public static readonly DependencyProperty DefaultImageSourceProperty = DependencyProperty.Register("DefaultImageSource", typeof(ImageSource), typeof(PressedImageButton), new PropertyMetadata(null, new PropertyChangedCallback(DefaultImageSourceChangedCallback))); 
    public static readonly DependencyProperty PressedImageSourceProperty = DependencyProperty.Register("PressedImageSource", typeof(ImageSource), typeof(PressedImageButton), new PropertyMetadata(null, new PropertyChangedCallback(PressedImageSourceChangedCallback))); 
    public static readonly DependencyProperty ImageStretchProperty = DependencyProperty.Register("ImageStretch", typeof(Stretch), typeof(PressedImageButton), new PropertyMetadata(Stretch.None, new PropertyChangedCallback(ImageStretchChangedCallback))); 

---

<ControlTemplate> 
     <Grid> 
      <Image Name="imgDefault" Source="{Binding Path=DefaultImageSource,ElementName=uc}" Stretch="{Binding Path=ImageStretch,ElementName=uc}"></Image> 
      <ContentPresenter Content="{TemplateBinding Property=ContentControl.Content}" /> 
     </Grid> 
     <ControlTemplate.Triggers> 
      <Trigger Property="Button.IsPressed" Value="True"> 
       <Setter Property="Image.Source" TargetName="imgDefault" Value="{Binding Path=PressedImageSource,ElementName=uc}"></Setter> 
       <Setter Property="UIElement.Effect"> 
        <Setter.Value> 
         <DropShadowEffect BlurRadius="10" Color="Black" Direction="0" Opacity="0.6" RenderingBias="Performance" ShadowDepth="0" /> 
        </Setter.Value> 
       </Setter> 
      </Trigger> 
      <Trigger Property="Button.IsMouseOver" Value="True"> 
       <Setter Property="UIElement.Effect"> 
        <Setter.Value> 
         <DropShadowEffect BlurRadius="10" Color="White" Direction="0" Opacity="0.6" RenderingBias="Performance" ShadowDepth="0" /> 
        </Setter.Value> 
       </Setter> 
      </Trigger> 
     </ControlTemplate.Triggers> 
    </ControlTemplate> 

Answer 4

Il modo più semplice in WPF:

1. creare un'immagine pulsante con Photoshop o altri programmi.

2. Posizionarlo sulla finestra e utilizzare gli eventi MouseEnter e MouseLeave.

   private void img1_MouseEnter(object sender, MouseEventArgs e) 
   { 
       Cursor = Cursors.Hand; 
   } 
   
   private void img1_MouseLeave(object sender, MouseEventArgs e) 
   { 
       Cursor = Cursors.Arrow; 
   } 
   

Answer 5

semplicemente provare questo codice

<Button Name="btn_Refresh" Grid.Column="0" Height="25" Width="25" HorizontalAlignment="Right" VerticalAlignment="Center" Background="White" Margin="0,0,10,0" Click="btn_Refresh_Click"> 
         <Button.Content> 
          <Grid> 
           <Path Width="15" Height="15" Fill="Blue" Stretch="Fill" Data="F1 M 38,20.5833C 42.9908,20.5833 47.4912,22.6825 50.6667,26.046L 50.6667,17.4167L 55.4166,22.1667L 55.4167,34.8333L 42.75,34.8333L 38,30.0833L 46.8512,30.0833C 44.6768,27.6539 41.517,26.125 38,26.125C 31.9785,26.125 27.0037,30.6068 26.2296,36.4167L 20.6543,36.4167C 21.4543,27.5397 28.9148,20.5833 38,20.5833 Z M 38,49.875C 44.0215,49.875 48.9963,45.3932 49.7703,39.5833L 55.3457,39.5833C 54.5457,48.4603 47.0852,55.4167 38,55.4167C 33.0092,55.4167 28.5088,53.3175 25.3333,49.954L 25.3333,58.5833L 20.5833,53.8333L 20.5833,41.1667L 33.25,41.1667L 38,45.9167L 29.1487,45.9167C 31.3231,48.3461 34.483,49.875 38,49.875 Z " Margin="-8.3,-2,-5.701,0"/> 
          </Grid> 
         </Button.Content> 
        </Button>