¿Cómo puedo cambiar la imagen de fondo de un Botón de Pase y haga Clic en? El Visual Studio de la interfaz de usuario no parecen proporcionar alguna forma fácil de hacerlo. En la actualidad el comportamiento predeterminado parece reemplazar mi imagen con un color sólido, que se ve realmente malo.

Todo lo que tengo hasta ahora es la base de Botón:

    <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>

Traté de controlar los eventos y configurar manualmente, pero no funciona para el Prensado/Lanzamiento:

        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);
            };

OriginalEl autor Nick Banks | 2012-05-09

6 Comentarios

  1. 6

    Terminé de editar el ControlTemplate sólo para crear y cambiar el Borde. Pero podría ser utilizado para cambiar la imagen.

        <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>

    OriginalEl autor Nick Banks

  2. 5

    Usted está casi allí. Siempre se puede aplicar un semi-transparente de color en la parte superior de su foto de abajo el texto/contenido pero desde que pidió el cambio de la totalidad de la imagen, aquí está lo que usted puede hacer:

    En Visual Studio 2012, si usted ya tiene un botón en su mayoría de estilo/configurado a lo que usted desea, haga clic derecho, Editar Plantilla -> Editar una Copia. Seleccione el lugar donde desea colocar el nuevo estilo/de la plantilla. Es como escoger donde poner el CSS. Podría ser en un archivo global (App.xaml o StandardStyle.xaml) o en el encabezado de la página de recursos) o en línea (control de recursos).

    El siguiente XAML puede ser sobre-simplificado y no el trabajo, sino que es la idea de que:

    <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>

    Ahora usted puede colocar sus 3 imágenes en el 3 <Image> etiquetas y desde el ContentPresenter es en la parte superior, cuando se utiliza la plantilla con <Button Template="{StaticResource MyButton}">, usted todavía puede poner el contenido en y aparecerá en la parte superior de la imagen de fondo. O simplemente puede tener un completamente gráfica de botón con las imágenes.

    Funcionó a la perfección para mí, para cambiar las imágenes de los botones sin tener un parpadeo

    OriginalEl autor xster

  3. 3

    La interfaz de usuario de windows XAML conjunto de herramientas que ahora tiene esta funcionalidad:

    El Botón de la imagen y pulse el Botón de la Imagen

    Uso de la consola del administrador de paquetes comando «Install-Package winrtxamltoolkit» en visual studio 2012 para instalar el kit de herramientas de… es realmente útil para muchas cosas.

    OriginalEl autor Gary95054

  4. 2

    Aquí es un estilo que se convierte visibilidad de encendido y apagado para algunas imágenes adicionales de agregar en la Mezcla. Las imágenes son transparentes y detrás de el botón de la imagen de fondo mediante el uso de «Enviar al fondo» .. así que en otras palabras, llegar a tener el uso de una imagen de fondo diferente pincel para cada botón, además de la intercambiado Normal, Puntero, y Pulsa las imágenes. Por lo tanto, dos imágenes de fondo superpuesto.

        <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>

    OriginalEl autor Gary95054

  5. 1

    Utilizar este Código en Pointer_Entered Evento en el Botón y se va a trabajar 🙂

     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;
    }
    Así que la única manera de hacerlo es en realidad el código que responde al evento y cambiar manualmente?
    Como sé que sí 🙂 pero puede ser que hay otra solución, pero yo nunca lo vi 🙂
    He probado, y funciona para entrar y salir, pero presionar y soltar el botón no funciona.

    OriginalEl autor Ibraheem Osama

  6. 0

    La razón += para PointerPressed /PointerReleased no funciona en su código original es porque el Botón (en realidad ButtonBase) de clase se encarga de estos eventos. Esto es debido a que está siendo consolidada en el evento Click (en Prensa). Si usted utiliza skillButton.AddHandler con el primer parámetro PointerPressedEvent, segundo parámetro un nuevo controlador de referencia para un controlador con nombre, y el tercer parámetro es true, usted podría estar usando PointerPressed en lugar de la Entrada/Cerró el evento.

    OriginalEl autor Wolf Schmidt-MSFT

Dejar respuesta

Please enter your comment!
Please enter your name here