360界面的图标样式如何做的？

Question

=====鼠标点击按钮，按钮下方透明矩形如何制作的？？？？

Answer 1

给你提供一个我以前写的透明Button样式。

    <Style x:Key="ButtonFocusVisual">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Border>
                        <Rectangle Stroke="Black" StrokeDashArray="1 2" StrokeThickness="1" Margin="4" SnapsToDevicePixels="true"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="TransparentButtonStyle" TargetType="{x:Type Button}">
        <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <Setter Property="BorderBrush" Value="{x:Static Microsoft_Windows_Themes_Classic:ClassicBorderDecorator.ClassicBorderBrush}"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Padding" Value="0,0,1,1"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Microsoft_Windows_Themes_Classic:ClassicBorderDecorator x:Name="ContentContainer" SnapsToDevicePixels="true" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderStyle="Raised" BorderThickness="0" FocusVisualStyle="{x:Null}">
                        <ContentPresenter FocusVisualStyle="{x:Null}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" RecognizesAccessKey="True" Focusable="True" IsEnabled="False"/>
                    </Microsoft_Windows_Themes_Classic:ClassicBorderDecorator>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsKeyboardFocused" Value="true">
                            <Setter Property="BorderStyle" TargetName="ContentContainer" Value="RaisedFocused"/>
                        </Trigger>
                        <Trigger Property="IsDefaulted" Value="true">
                            <Setter Property="BorderStyle" TargetName="ContentContainer" Value="RaisedFocused"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter Property="BorderThickness" Value="2"/>
                            <Setter Property="BorderStyle" TargetName="ContentContainer" Value="RaisedPressed"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver"
                                 Value="True">
                            <Setter Property="Effect">
                                <Setter.Value>
                                    <DropShadowEffect ShadowDepth="0" Color="White" BlurRadius="15" />
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        <Trigger Property="ToggleButton.IsChecked" Value="true">
                            <Setter Property="BorderStyle" TargetName="ContentContainer" Value="RaisedPressed"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

 

Answer 2

Microsoft_Windows_Themes_Classic:ClassicBorderDecorator

缺少引用？？？

还有，不只是透明，还有鼠标状态,按下、掠过，按钮显示底层透明矩形

Answer 3

看我的例子： http://code.msdn.microsoft.com/Dynamic-Image-Button-in-WPF-caec28b7

---

Bob Bao [MSFT]
MSDN Community Support | Feedback to us
Get or Request Code Sample from Microsoft
Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Answer 4

给你提供一个我以前写的透明Button样式。

    <Style x:Key="ButtonFocusVisual">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Border>
                        <Rectangle Stroke="Black" StrokeDashArray="1 2" StrokeThickness="1" Margin="4" SnapsToDevicePixels="true"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="TransparentButtonStyle" TargetType="{x:Type Button}">
        <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <Setter Property="BorderBrush" Value="{x:Static Microsoft_Windows_Themes_Classic:ClassicBorderDecorator.ClassicBorderBrush}"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Padding" Value="0,0,1,1"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Microsoft_Windows_Themes_Classic:ClassicBorderDecorator x:Name="ContentContainer" SnapsToDevicePixels="true" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderStyle="Raised" BorderThickness="0" FocusVisualStyle="{x:Null}">
                        <ContentPresenter FocusVisualStyle="{x:Null}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" RecognizesAccessKey="True" Focusable="True" IsEnabled="False"/>
                    </Microsoft_Windows_Themes_Classic:ClassicBorderDecorator>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsKeyboardFocused" Value="true">
                            <Setter Property="BorderStyle" TargetName="ContentContainer" Value="RaisedFocused"/>
                        </Trigger>
                        <Trigger Property="IsDefaulted" Value="true">
                            <Setter Property="BorderStyle" TargetName="ContentContainer" Value="RaisedFocused"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter Property="BorderThickness" Value="2"/>
                            <Setter Property="BorderStyle" TargetName="ContentContainer" Value="RaisedPressed"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver"
                                 Value="True">
                            <Setter Property="Effect">
                                <Setter.Value>
                                    <DropShadowEffect ShadowDepth="0" Color="White" BlurRadius="15" />
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        <Trigger Property="ToggleButton.IsChecked" Value="true">
                            <Setter Property="BorderStyle" TargetName="ContentContainer" Value="RaisedPressed"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

正好也用！ 谢谢！！
 

Answer 5

Bob Bao   OK!!!!啦~~~

虚线框也去掉了，好像按钮和背景图形没有居中对齐，总是偏左、右一点点

Answer 6

图片问题吧，可能是视觉错误吧

 

Jar

---

Best day, Best life