具有相似样式WPF的2个按钮的可见性

时间:2014-07-25 09:51:00

标签: wpf xaml

我使用具有以下样式的自定义样式WPF按钮[目的是按钮内容(星形图像)仅在鼠标悬停时可见)

   <Style x:Key="ViewBookmarkRemoveButtonStyle" TargetType="{x:Type Button}">
            <Style.Resources>
                <Storyboard x:Key="MouseOverAnimation" >
                    <DoubleAnimation Duration="0:0:1" To="1" Storyboard.TargetProperty="Opacity"/>
                </Storyboard>
                <Storyboard x:Key="MouseOutAnimation">
                    <DoubleAnimation Duration="0:0:1" To="0" Storyboard.TargetProperty="Opacity"/>
                </Storyboard>
            </Style.Resources>
            <Setter Property="Opacity" Value="1"></Setter>
            <Setter Property="Margin" Value="0"></Setter>
            <Setter Property="Content">
                <Setter.Value>
                    <Image  Source="images\star_inactive.png" Margin="15" />
                </Setter.Value>
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border Background="Transparent" >
                            <ContentPresenter Margin="{TemplateBinding Padding}"  HorizontalAlignment="Center" Content="{TemplateBinding Content}" VerticalAlignment="Center"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="Transparent"/>
                    <Trigger.EnterActions>
                        <BeginStoryboard Storyboard="{StaticResource MouseOverAnimation}" />
                    </Trigger.EnterActions>
                    <Trigger.ExitActions>
                        <BeginStoryboard Storyboard="{StaticResource MouseOutAnimation}" />
                    </Trigger.ExitActions>
                </Trigger>
            </Style.Triggers>
        </Style>

在页面xaml中,我使用了这个按钮的2个实例

 <StackPanel>

                <Button Style="{StaticResource ResourceKey=ViewBookmarkAddButtonStyle}"
                                   Name="btnLeft" VerticalAlignment="Top" HorizontalAlignment="Right"                                  
                               ></Button>

                <Button Style="{StaticResource ResourceKey=ViewBookmarkAddButtonStyle}"
                                    Name="btnRight" VerticalAlignment="Top" HorizontalAlignment="Right"                                        
                                    ></Button>
            </StackPanel>

但在运行时只能看到一个按钮。 是否存在任何此类限制?或者我是否需要创建另一个样式的副本以使第二个按钮也遵循相同的样式?

2 个答案:

答案 0 :(得分:1)

x:Shared =“False”设置为样式


X:shared :设置为false时,修改WPF资源检索行为,以便对属性资源的请求为每个请求创建一个新实例,而不是为所有请求共享同一个实例。 / p>

  <Style x:Key="ViewBookmarkRemoveButtonStyle" x:Shared="False"  TargetType="{x:Type Button}">

        ....

  </Style>

访问此link获取x:共享

另一种方法:在ContentPresenter.Content中添加图片

   <ControlTemplate TargetType="{x:Type Button}">
                    <Border Background="Transparent" >
                        <ContentPresenter Margin="{TemplateBinding Padding}"  HorizontalAlignment="Center"  VerticalAlignment="Center">
                            <ContentPresenter.Content>
                                <Image Source="login.jpg" Margin="2"/>
                            </ContentPresenter.Content>
                        </ContentPresenter>
                    </Border>
    </ControlTemplate>

答案 1 :(得分:1)

你的问题有点不清楚,如果我误解了,请原谅我。我正在解决你问题的这一部分:

  

或者我是否需要创建另一个样式的副本以使第二个按钮也遵循相同的样式?

在WPF中,您可以创建一个重复的&#39; Style使用这样的Style.BasedOn property

<Style x:Key="AlternativeButtonStyle" TargetType="{x:Type Button}"
    BasedOn="{StaticResource ResourceKey=ViewBookmarkAddButtonStyle}">
    <!-- Declare your different properties or Triggers here -->
</Style>

...

<StackPanel>
    <Button Style="{StaticResource ViewBookmarkAddButtonStyle}" Name="btnLeft"
        VerticalAlignment="Top" HorizontalAlignment="Right" />
    <Button Style="{StaticResource AlternativeButtonStyle}" Name="btnRight" 
        VerticalAlignment="Top" HorizontalAlignment="Right" />
</StackPanel>