0

この方法で、式ブレンド ボタンのようなボタン スタイルを作成したいと考えています。

  • マウスがそれらの上にないとき、それらのアイコンは白黒で半透明です。
  • マウスがそれらの上にあるとき、それらは色付きになり、透明ではなくなります。

式ブレンドでコーディングせずに、XAML アイコンのようなスタイルを作成することは可能ですか?

2 つのアイコンを使用したくないことに注意してください。

4

2 に答える 2

2

このようなことから始めるのがよいでしょう。

2つの画像があります（これらはオンラインソースからのもので、リソース.pngに置き換えることができます）、マウスがボタンの上にあると「iconfocus」が表示され、そうでない場合は「iconNofocus」が表示されます。

これは非常に大まかな例です:

 <Style TargetType="{x:Type Button}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border x:Name="PART_border" Background="{TemplateBinding Background}"  BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="5">
                            <Grid>
                                <Border x:Name="Highlight" Opacity="0">
                                    <Border.Background>
                                        <LinearGradientBrush EndPoint="0.5,0.1" StartPoint="0.5,0.8">
                                            <GradientStop Color="#90009FFF" Offset="0"/>
                                            <GradientStop Color="#00FFFFFF" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Border.Background>
                                </Border>
                                <StackPanel Orientation="Horizontal">
                                    <Grid Width="{TemplateBinding ActualHeight}"  Height="{TemplateBinding ActualHeight}">
                                        <Image x:Name="iconFocus" Margin="2" Opacity="0" Source="http://icons.iconarchive.com/icons/deleket/soft-scraps/32/Folder-icon.png"/>
                                        <Image x:Name="iconNofocus" Margin="2" Opacity="0.5" Source="http://icons.iconarchive.com/icons/deleket/soft-scraps/32/Folder-Generic-Green-icon.png"/>
                                    </Grid>
                                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" />
                                </StackPanel>
                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="Highlight" Property="Opacity" Value="1" />
                                <Setter TargetName="iconFocus" Property="Opacity" Value="1" />
                                <Setter TargetName="iconNofocus" Property="Opacity" Value="0" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

普通： ここに画像の説明を入力

マウスオーバー： ここに画像の説明を入力

于 2012-12-27T08:57:54.713 に答える
2

画像の代わりにパスを使用する場合、ビジュアル ステートを使用して、パスを境界線と透明な塗りつぶしから元のパスに簡単に切り替えることができます。

InkScapeを使用して、独自の画像をパス (xaml) に変換したり、準備した画像を Xamalot などのサイトでオンラインで検索したり、 Syncfusion Metro Studioなどのツールを使用して必要なxamlを作成したりできます。

于 2013-01-04T08:13:17.497 に答える