WPF – Come creare un pulsante immagine con modello

Sto cercando di creare un pulsante che ha 3 immagini: un’immagine Normale, una Premuto immagine e Disabili immagine (io uso questi per la creazione di pulsanti freccia su/giù).

Credo che l’approccio corretto sarebbe quello di derivare da Button e utilizzare un Template e set di trigger per modificare l’immagine. Ho 3 proprietà di dipendenza, uno per ogni immagine.

Le immagini che vorresti essere .png e hanno lo sfondo trasparente (non rettangolare).

Sto cercando qualcosa di simile CBitmapButton in MFC.

InformationsquelleAutor | 2009-08-11

 

5 Replies
  1. 71

    Non è necessario proprietà di dipendenza perché si eredita da Button. Hai già il IsPressed e IsEnabled proprietà. 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 il tuo UserControl file di code-behind:

    public partial class ThreeStateImageButton : Button
    {
       public ThreeStateImageButton()
       {
          InitializeComponent();
       }
    }
    • Esattamente. Infatti, ereditando dal Pulsante è superfluo. Si può fare tutto con questo modello e uno stile da applicare. La regola dovrebbe essere, se avete bisogno di modificare il proprio comportamento, ereditare e fare un controllo. Se hai bisogno di cambiare il “Look”, quindi utilizzare uno stile.
    • Grazie per la tua risposta. Questo è quello che stavo cercando.
    • GRAZIE. Questa è l’unica Immagine Pulsante soluzione che ha funzionato per me. Ho anche aggiunto un “Hover” trigger, Grandi Complimenti!
    • quando cerco di aggiungere il pulsante modello mostra di errore, come i prelievi di proprietà non è stato trovato il pulsante
    • Bella soluzione. Se qualcuno si chiedeva circa la riusabilità, vale la pena notare che i percorsi delle immagini non hanno bisogno di essere codificato in stile. Se uno dovesse cambiare qualcosa all’interno lo stile o il modello, ad esempio, modificare il testo del pulsante o icona, è possibile utilizzare le proprietà associate come suggerito in questa risposta: stackoverflow.com/a/650620/724944
    • Come faccio a passare l’immagine src come parametro in modo che posso utilizzare questa soluzione per diversi pulsanti, grazie

  2. 1
     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>
  3. -1

    Semplicemente di 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>
  4. -3

    Il modo più semplice in WPF:

    1. Creare un pulsante immagine con Photoshop o altri programmi.

    2. Posizionarlo sulla vostra finestra e utilizzare il MouseEnter e MouseLeave eventi.

      private void img1_MouseEnter(object sender, MouseEventArgs e)
      {
          Cursor = Cursors.Hand;
      }
      
      private void img1_MouseLeave(object sender, MouseEventArgs e)
      {
          Cursor = Cursors.Arrow;
      }
    • La questione si afferma chiaramente che hanno bisogno di un immagine con un modello. Un photoshop pulsante non costituisce un modello di qualsiasi genere, un’inoltre non è necessario per gestire il MouseEnter e MouseLeave eventi per modificare il cursore, si ha la proprietà Cursor per che. Una cosa di più, non asume che il cursore normale è una freccia, potrebbe essere qualcosa di diverso, è possibile impostare il Cursore su null per tornare alla normalità.

Lascia un commento