Question

所以我有这个WPF风格：

<Style x:Key="SmallLinkButton" TargetType="Button">
<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="Button">
            <TextBlock TextDecorations="Underline">
                <ContentPresenter />
            </TextBlock>
        </ControlTemplate>
    </Setter.Value>
</Setter>
    <Setter Property="Foreground" Value="#234D20" />
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="true">
            <Setter Property="Foreground" Value="#77AB59" />
        </Trigger>
    </Style.Triggers>
</Style>

制作一个链接按钮，当鼠标结束时，它会变成颜色。我有一组具有这种风格的按钮，我希望能够在用户点击鼠标后将按钮前景更改为第二个值，除非他点击另一个按钮。

只使用这种风格才能做到这一点？我不相信，但我是WPF的新手，或者你将如何实现这个功能。

提前致谢。

解决方案

正如@Phil所建议的，解决方案是使用一个容器，在这种情况下是一个列表框，样式为：

<!-- Start of the menu -->
    <!-- Horizontal listbox-->
    <Style x:Key="MenuListBox" TargetType="ListBox">
        <Setter Property="BorderBrush" Value="{x:Null}" />
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <!-- Listbox item with the special behavior -->
    <Style x:Key="MenuListBoxItem" TargetType="ListBoxItem">
        <Style.Resources>
            <!-- SelectedItem with focus -->
            <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}"
                Color="Transparent" />
            <!-- SelectedItem without focus -->
            <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" 
                Color="Transparent" />
            <!-- SelectedItem text foreground -->
            <SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" 
                Color="{DynamicResource {x:Static SystemColors.ControlTextColorKey}}" />
        </Style.Resources>
        <Setter Property="FocusVisualStyle" Value="{x:Null}" />
    </Style>
    <!-- Menu buttons -->
    <Style x:Key="BigMenuLinkButton" TargetType="TextBlock">
        <Setter Property="FontFamily" Value="Segoe UI Light"/>
        <Setter Property="FontSize" Value="36" />
        <Setter Property="Foreground" Value="#C9DF8A" />

        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="true">
                <Setter Property="Foreground" Value="#77AB59" />
            </Trigger>
            <DataTrigger Value="True" Binding="{Binding Path=IsSelected, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem}}}">
                <Setter Property="Foreground" Value="#234D20"/>
            </DataTrigger>
        </Style.Triggers>
    </Style>
    <Style x:Key="MediumMenuLinkButton" TargetType="TextBlock">
        <Setter Property="FontSize" Value="24" />
        <Setter Property="Foreground" Value="#C9DF8A" />

        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="true">
                <Setter Property="Foreground" Value="#77AB59" />
            </Trigger>
            <DataTrigger Value="True" Binding="{Binding Path=IsSelected, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem}}}">
                <Setter Property="Foreground" Value="#234D20"/>
            </DataTrigger>
        </Style.Triggers>
    </Style>
    <!-- End of the menu -->

Answer 1

这是一个让你入门的想法

设置列表框样式，以使列表框项看起来像链接按钮：

的Xaml

<Page.Resources>
    <Style x:Key="SmallLinkButton" TargetType="TextBlock">
        <Setter Property="TextDecorations" Value="Underline"/>
        <Setter Property="Foreground" Value="#234D20" />

        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="true">
                <Setter Property="Foreground" Value="#77AB59" />
            </Trigger>
            <DataTrigger Value="True" 
                 Binding="{Binding Path=IsSelected, 
                   RelativeSource={RelativeSource Mode=FindAncestor, 
                   AncestorType={x:Type ListBoxItem}}}">
               <Setter Property="Foreground" Value="Red"/>
            </DataTrigger>
        </Style.Triggers>
    </Style>

    <Style x:Key="NullSelectionListBoxItem" TargetType="ListBoxItem">
        <Style.Resources>
            <!-- SelectedItem with focus -->
            <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}"
                Color="Transparent" />
            <!-- SelectedItem without focus -->
            <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" 
                Color="Transparent" />
            <!-- SelectedItem text foreground -->
            <SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" 
                Color="{DynamicResource {x:Static SystemColors.ControlTextColorKey}}" />
        </Style.Resources>
        <Setter Property="FocusVisualStyle" Value="{x:Null}" />
    </Style>
</Page.Resources>

<Page.DataContext>
    <Samples:LinkButtonsInListBoxViewModel/>
</Page.DataContext>

<Grid>
    <ListBox ItemsSource="{Binding Items}" 
             ItemContainerStyle="{StaticResource NullSelectionListBoxItem}">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <TextBlock Margin="5" 
                    Style="{StaticResource SmallLinkButton}" Text="{Binding}"/>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</Grid>

C＃

public class LinkButtonsInListBoxViewModel
{
    public LinkButtonsInListBoxViewModel()
    {
        Items = new List<string> {"One", "Two", "Three"};
    }

    public List<string> Items { get; private set; }
}

如何将“MouseClicked”行为添加到WPF样式

1 个答案: