2

したがって、このフリー ソフトウェアを使用して、以下に示すような独自のメトロ ボタンを作成できます。

ここに画像の説明を入力

ただし、アイコンは白いので、正しく表示されない可能性があります。ここで、グリッド (XAML で記述) に配置します。 ここに画像の説明を入力

それでも技術的には画像なので、ボタンにしました。画像をボタンに変換するコードは次のとおりです。

<Button x:Name="Button_CreateAccount" Content="" HorizontalAlignment="Center" Height="65" Margin="0" Style="{StaticResource Button_CreateAccount}" Width="65" Click="Button_CreateAccount_Clicked"/>

「Button_CreateAccount」という名前を付け、Clicked イベント ハンドラー「Button_CreateAccount_Clicked」を追加し、カスタム スタイル「{StaticResource Button_CreateAccount}」を使用します。

思った通りに動くのですが、他のボタンと違って押しても点滅せず、離すと点滅が解除されます。そのため、スタイルを変更して押されたときに、プログラムで「点滅」させることができると思います。Visual Studio 2012 で Blend によって自動的に追加された未編集のスタイルを次に示します。

<Style x:Key="Button_CreateAccount" TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Pressed"/>
                                <VisualState x:Name="Disabled"/>
                                <VisualState x:Name="PointerOver"/>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused"/>
                                <VisualState x:Name="PointerFocused"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Image Source="Assets/Icons_White/add_user.png" Stretch="Fill"/>
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

ただし、私は XAML 言語を話せません :( 一度押された画像の背景の色を単純に変更する方法がわかりません。

4

1 に答える 1

3

まず、画像の背景を緑色ではなく透明にする必要があります。その後、スタイルを使用せず、ボタンをこれに変更してください

<Button x:Name="Button_CreateAccount" HorizontalAlignment="Center" 
        Height="65" Margin="0" Width="65" Click="Button_CreateAccount_Clicked"
        Background="Green">
    <Image Source="Assets/Icons_White/add_user.png" Stretch="Fill"/>
</Button>

ここから、押すと色が変化し始めます。色を変更したい場合は、ボタンに新しいスタイルを与えます。最良の方法は、Visual Studio または Blend を使用し、(デザイン ビューまたはドキュメント アウトラインで) ボタンを右クリックし、[テンプレートの編集] -> [コピーの編集...] を選択することです。

ボタンが押されたときの色を変更するには、Pressed VisualState 内の色を変更します。

<VisualState x:Name="Pressed">
    <Storyboard>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
            <DiscreteObjectKeyFrame KeyTime="0">
                <DiscreteObjectKeyFrame.Value>
                    <SolidColorBrush Color="Blue"/>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPressedForegroundThemeBrush}"/>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</VisualState>
于 2012-11-14T20:42:41.047 に答える