Silverlight自定义按钮

Question

我为按钮创建了样式：

<Style x:Key="TicketOnBizOptionsButton" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ColorAnimation Duration="0" To="#FFC0C0C0" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="border"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <ColorAnimation Duration="0" To="#FF14548C" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="border"/>
                                    <ColorAnimation Duration="0" To="White" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="Content"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed"/>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Border x:Name="border" BorderThickness="1" Background="#FFF2F2F2" CornerRadius="8" BorderBrush="#FFD5D5D5">
                        <Border.Effect>
                            <DropShadowEffect Direction="285" ShadowDepth="2" Color="#FFDFDFDF" BlurRadius="2"/>
                        </Border.Effect>
                        <Button Content="" Margin="-1" Width="105" BorderBrush="{x:Null}" Foreground="White" Background="{x:Null}" Opacity="0"/>
                    </Border>
                    <TextBlock x:Name="Content" Margin="5,5,5,5" Text="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

样式可以正常工作，并且按钮可以。 但是，当我单击按钮时，我注意到一些不稳定的行为。

有时仅在直接在文本上方单击时，才在边框上单击时才有效...

我添加的边框对此有任何影响？

提前致谢！

Answer 1

        <Style x:Key="TicketOnBizOptionsButton" TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ColorAnimation Duration="0" To="#FFC0C0C0" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="border"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <ColorAnimation Duration="0" RepeatBehavior="1x" To="#FF14548C" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="border"/>
                                        <ColorAnimation Duration="0" RepeatBehavior="1x" To="White" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="Content"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="border" BorderThickness="1" Background="#FFF2F2F2" CornerRadius="8" BorderBrush="#FFD5D5D5">
                            <Border.Effect>
                                <DropShadowEffect Direction="285" ShadowDepth="2" Color="#FFDFDFDF" BlurRadius="2"/>
                            </Border.Effect>
                        </Border>
                        <TextBlock x:Name="Content" Margin="5,5,5,5" Text="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

问题是您在模板中使用了一个按钮，因此一旦触发按下状态，可能会导致模板中的另一个按钮出现一些问题。 我只是删除了边界内的一个，效果很好。

希望能帮助到你。