Ändern Sie die Schaltfläche Bild Auf Hover oder Klick

Wie ändere ich das Hintergrundbild von einer Taste auf Hover-und Klick? Die Visual Studio-Benutzeroberfläche offensichtlich nicht bieten eine einfache Möglichkeit, es zu tun. Derzeit das Standard-Verhalten scheint zu ersetzen, die mein Bild mit einer Farbe, die sieht wirklich schlecht.

Alles, was ich habe, so weit ist die Taste Basis:

    <Button Content="" Height="75" VerticalAlignment="Center" Width="75" HorizontalAlignment="Center" ClickMode="Press">
        <Button.Background>
            <ImageBrush ImageSource="../data/images/icons/skill_icon_0.png"/>
        </Button.Background>
    </Button>

Habe ich versucht, Ereignisse zu behandeln und manuell einzustellen, aber es funktioniert nicht für Gedrückt/Losgelassen:

        Button skillButton = new Button();
        skillButton.Width = 75;
        skillButton.Height = 75;
        skillButton.ClickMode = ClickMode.Press;
        skillButton.Background = GetIconImage(iconIndex, 0);
        skillButton.PointerEntered += 
            (object sender, Windows.UI.Xaml.Input.PointerEventArgs e) => {
                skillButton.Background = GetIconImage(iconIndex, 1);
            };
        skillButton.PointerExited +=
            (object sender, Windows.UI.Xaml.Input.PointerEventArgs e) => {
                skillButton.Background = GetIconImage(iconIndex, 0);
            };
        skillButton.PointerPressed +=
            (object sender, Windows.UI.Xaml.Input.PointerEventArgs e) => {
                skillButton.Background = GetIconImage(iconIndex, 2);
            };
        skillButton.PointerReleased +=
            (object sender, Windows.UI.Xaml.Input.PointerEventArgs e) => {
                if (skillButton.FocusState == FocusState.Pointer)
                    skillButton.Background = GetIconImage(iconIndex, 1);
                else skillButton.Background = GetIconImage(iconIndex, 0);
            };

InformationsquelleAutor Nick Banks | 2012-05-09

Landete ich Bearbeiten das ControlTemplate nur zum erstellen und ändern der Rahmen. Aber es könnte verwendet werden, um das Bild zu ändern auch.

    <Button Width="75" Height="75" ClickMode="Press">
        <Button.Template>
            <ControlTemplate TargetType="Button">
                <Border x:Name="RootElement" CornerRadius="10" BorderThickness="2">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition To="MouseOver" GeneratedDuration="0:0:0.1"/>
                                <VisualTransition To="Pressed" GeneratedDuration="0:0:0.1"/>
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetName="BorderBrush" 
                                                    Storyboard.TargetProperty="Color" 
                                                    To="Yellow" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetName="BorderBrush" 
                                                    Storyboard.TargetProperty="Color"
                                                    To="Black"/>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Border.BorderBrush>
                        <SolidColorBrush x:Name="BorderBrush" Color="White"/>
                    </Border.BorderBrush>
                    <Border.Background>
                        <ImageBrush ImageSource="ms-appx:/data/images/icons/skill_icon_0.png"/>
                    </Border.Background>
                </Border>
            </ControlTemplate>
        </Button.Template>
    </Button>

InformationsquelleAutor Nick Banks

Bist du ziemlich viel es. Sie können immer eine semi-transparente Farbe auf dein Bild unter deinen text/Inhalt, aber da fragte man zum ändern das gesamte Bild, hier ist was Sie tun können:

In Visual Studio 2012, wenn Sie bereits über eine Taste, meist gestylt/konfiguriert, was Sie wollen, der rechten Maustaste, Bearbeiten, Template -> Bearbeiten Sie eine Kopie. Wählen Sie aus, wo Sie wollen, um die neue Formatvorlage/Vorlage. Es ist wie Kommissionierung, wo die CSS. Könnte in einer globalen Datei (App.xaml oder im StandardStyle.xaml) oder in der Kopfzeile (Seite Ressourcen) oder inline (Kontrolle von Ressourcen).

Den unten XAML möglicherweise zu stark vereinfacht und nicht die Arbeit, sondern es ist die Idee:

<ControlTemplate x:Key="MyButton" TargetType="Button">
    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal" />
                <VisualState x:Name="PointerOver">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HoverBackground"
                            Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Pressed">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PressedBackground"
                            Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                [...]
            </VisualStateGroup>
            <VisualStateGroup x:Name="FocusStates">
                [...]
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Border x:Name="Border" [...]>
            <Grid>
                <Image Source="[...]" Stretch="None" />
                <Image x:Name="HoverBackground" Source="[...]" Visibility="Collapsed" />
                <Image x:Name="PressedBackground" Source="[...]" Visibility="Collapsed" />
                <ContentPresenter x:Name="ContentPresenter"
                Content="{TemplateBinding Content}"
                ContentTransitions="{TemplateBinding ContentTransitions}"
                ContentTemplate="{TemplateBinding ContentTemplate}"
                Margin="{TemplateBinding Padding}"
                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
                    [...]/>
            </Grid>
        </Border>
        [...]
    </Grid>
</ControlTemplate>

Nun können Sie Ihr 3 Bilder in der 3 <Image> tags und seit dem ContentPresenter ist auf der Oberseite, wenn Sie die Vorlage mit <Button Template="{StaticResource MyButton}"> können Sie immer noch Inhalte und es erscheint auf Ihrem Hintergrundbild. Oder Sie können einfach nur einen grafischen button mit den Bildern zu.

Funktionierte perfekt für mich, für die Umschalten-Taste Bilder ohne flimmern

InformationsquelleAutor xster

3

Den windows-UI-XAML toolkit hat nun diese Funktionalität:

Image-Taste und Toggle-Button-Bild

Verwenden Sie den Paket-manager-Konsole mit dem Befehl "Install-Package winrtxamltoolkit" in visual studio 2012 zu installieren das toolkit... Es ist wirklich für viele Dinge nützlich.

InformationsquelleAutor Gary95054

Hier ist ein Stil, stellt die Sichtbarkeit ein-und ausschalten für einige zusätzliche Bilder, die Sie hinzufügen, in die Mischung. Die Bilder sind transparent und gehen hinter der Schaltfläche hintergrund Bild verwenden Sie die "Send to Back" .. also in anderen Worten, Sie erhalten, um mit einem anderen hintergrund "Bild" für jede Taste, plus die vertauscht Normal, Zeiger und Drückte die Bilder. Also zwei hintergrund-Bilder überlagert.

    <Style x:Key="qButtonStyle" TargetType="Button">
    <Setter Property="Background" Value="{StaticResource ButtonBackgroundThemeBrush}" />
    <Setter Property="Foreground" Value="{StaticResource ButtonForegroundThemeBrush}" />
    <Setter Property="BorderBrush" Value="{StaticResource ButtonBorderThemeBrush}" />
    <Setter Property="BorderThickness" Value="{StaticResource ButtonBorderThemeThickness}" />
    <Setter Property="Padding" Value="4" />
    <Setter Property="HorizontalAlignment" Value="Left" />
    <Setter Property="VerticalAlignment" Value="Center" />
    <Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}" />
    <Setter Property="FontWeight" Value="SemiBold" />
    <Setter Property="FontSize" Value="{StaticResource ControlContentThemeFontSize}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid x:Name="grid">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" >
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="imageNormal" d:IsOptimized="True"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="PointerOver">

                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush)" Storyboard.TargetName="Border">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Null}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)" Storyboard.TargetName="Border">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Thickness>0</Thickness>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="imageNormal">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Collapsed</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="imagePressed">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Collapsed</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="imagePointer" d:IsOptimized="True"/>
                                </Storyboard>

                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
                                        Storyboard.TargetName="Border"/>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
                                        Storyboard.TargetName="ContentPresenter"/>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush)" Storyboard.TargetName="Border">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Null}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill)" Storyboard.TargetName="FocusVisualWhite">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <SolidColorBrush Color="#7F006400"/>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill)" Storyboard.TargetName="FocusVisualBlack">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <SolidColorBrush Color="#7F006400"/>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="imagePressed" d:IsOptimized="True"/>
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="imagePointer" d:IsOptimized="True"/>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="imageNormal">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Collapsed</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="imagePointer">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Collapsed</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="0.25" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="FocusStates">
                            <VisualState x:Name="Focused">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity"
                                        Storyboard.TargetName="FocusVisualWhite" />
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity"
                                        Storyboard.TargetName="FocusVisualBlack" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unfocused" />
                            <VisualState x:Name="PointerFocused" />
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Image x:Name="imagePointer" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Source="ms-appx:///Assets/btnBGPointer.png" Opacity="0"/>
                    <Image x:Name="imagePressed" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Source="ms-appx:///Assets/btnBGPressed.png" Opacity="0"/>
                    <Image x:Name="imageNormal" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Source="ms-appx:///Assets/bgButtonBase.png"/>
                    <Border x:Name="Border"
                        Background="{TemplateBinding Background}" Margin="3">
                        <ContentPresenter x:Name="ContentPresenter"
                            ContentTemplate="{TemplateBinding ContentTemplate}"
                            ContentTransitions="{TemplateBinding ContentTransitions}"
                            Content="{TemplateBinding Content}"
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            Margin="{TemplateBinding Padding}"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                    </Border>
                    <Rectangle x:Name="FocusVisualWhite" IsHitTestVisible="False" Opacity="0"
                        StrokeDashOffset="1.5" StrokeEndLineCap="Square"
                        Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}" StrokeDashArray="1,1" />
                    <Rectangle x:Name="FocusVisualBlack" IsHitTestVisible="False" Opacity="0"
                        StrokeDashOffset="0.5" StrokeEndLineCap="Square"
                        Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}" StrokeDashArray="1,1" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

InformationsquelleAutor Gary95054

1

Verwenden Sie diesen Code in Pointer_Entered Ereignis auf die Schaltfläche, und es wird funktionieren 🙂
```
 private void Button_PointerEntered_1(object sender, PointerEventArgs e)
    {
        BitmapImage bmp = new BitmapImage();
        Uri u = new Uri("ms-appx:/Images/Shapes/blueball.png", UriKind.RelativeOrAbsolute);
        bmp.UriSource = u;
        ImageBrush i = new ImageBrush();
        i.ImageSource=bmp;
        button.Background= i;

    }
```
Also ist der einzige Weg, es zu tun ist eigentlich code, der auf das Ereignis reagiert und manuell ändern?
Ich weiß ja :), aber vielleicht gibt es eine andere Lösung, aber ich sah es nie 🙂
Ich versuchte es, und es funktioniert für enter und exit, aber das drücken und loslassen funktioniert nicht.

InformationsquelleAutor Ibraheem Osama
0

Den Grund des + = - für PointerPressed /PointerReleased funktioniert nicht in deinem ursprünglichen code ist, weil die Schaltfläche (eigentlich ButtonBase) Klasse-die Verarbeitung dieser Ereignisse. Das ist, weil Sie konsolidiert in das Click-Ereignis (on Release). Wenn Sie skillButton.AddHandler mit dem ersten param PointerPressedEvent, zweiten Parameter eine neue handler-Verweis auf eine benannte handler, und der Dritte Parameter true ist, die Sie verwenden können, PointerPressed eher als die Eingegebene/Beendet die Veranstaltung.

InformationsquelleAutor Wolf Schmidt-MSFT

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.