0

ボタンがクリックされたときにボタンの背景画像を変更することについて質問がありました。

グーグルで検索してみましたが、うまくいくものが見つかりませんでした。

これが私のコードです

<Button Grid.Column="0" Grid.Row="0" x:Name="btnHome" VerticalAlignment="Stretch" BorderBrush="{x:Null}" HorizontalAlignment="Stretch" Click="btnHome_Click" PointerEntered="btnHome_PointerEntered">
                <Button.Template>
                    <ControlTemplate TargetType="Button">
                        <Border x:Name="RootElement">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            //I want my background change here
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            //And here
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border.Background>
                                <ImageBrush ImageSource="images/back_button.png"/>
                            </Border.Background>
                        </Border>
                    </ControlTemplate>
                </Button.Template>
            </Button>

私もこれを試しました

private void btnHome_PointerEntered(object sender, PointerRoutedEventArgs e)
    {
        BitmapImage bmp = new BitmapImage();
        Uri u = new Uri("ms-appx:images/back_button_mouseover.png", UriKind.RelativeOrAbsolute);
        bmp.UriSource = u;
        ImageBrush i = new ImageBrush();
        i.ImageSource = bmp;
        btnHome.Background = i;
    }

しかし残念ながら、これはどちらも機能しませんでした

4

4 に答える 4

2

WinRT Xaml Toolkitを使用すると、すべての効果を得ることができます。ツールキットからバイナリを参照します。ページにxml名前空間を追加します。

xmlns:controls="using:WinRTXamlToolkit.Controls"

次のようなボタンを使用します。

<controls:ImageButton HorizonalAlignment="Center"
    NormalStateImageSource="normal.png"
    HoverStateImageSource="hover.png"
    PressedStateImageSource="pressed.png" />

それ以外にも便利なものがたくさんあります。

于 2012-11-29T11:01:53.763 に答える
0

私はこの質問に答えを見つけました。

コントロールのテンプレートを編集する必要があります。

Blendで、または「手動で」それを行うことができます。

ボタンのデフォルトテンプレートを取得し(右ボタンを押し、テンプレートを編集し、コピーを編集し、名前を付けて[OK]を押します)、ニーズに合わせてカスタマイズします

編集:RadioButtonテンプレートのカスタマイズに関するMSDNリソースは次のとおりです。

于 2012-12-14T14:06:43.853 に答える
0

これは、Blendで追加するいくつかの追加画像の表示のオンとオフを切り替えるスタイルです。画像は透明で、「Send to Back」を使用してボタンの背景画像の後ろに移動します。つまり、ボタンごとに異なる背景画像ブラシに加えて、スワップされた標準、ポインタ、および押された画像を使用し続けることができます。したがって、2つの背景画像がオーバーレイされます。

    <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>
于 2013-02-08T21:06:35.773 に答える
0

私はこのコードを使用しています:

<Button Style="{StaticResource anyButton}" Cursor="Hand" ClickMode="Press" Click="Button_Click_1" />

スタイル:

        <Style x:Key="anyButton" TargetType="Button">
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border Name="border" 
                    BorderThickness="0" 
                    Background="{TemplateBinding Background}">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="False">
                            <Setter Property="Background" TargetName="border">
                                <Setter.Value>
                                    <ImageBrush ImageSource="C:\Users\image1.png" />
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" TargetName="border">
                                <Setter.Value>
                                    <ImageBrush ImageSource="C:\Users\image2.png" />
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        <Trigger Property="IsFocused" Value="True">
                            <Setter Property="Background" TargetName="border">
                                <Setter.Value>
                                    <ImageBrush ImageSource="C:\Users\image3.png" />
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
于 2016-02-28T12:32:25.633 に答える