Question

So I have this WPF style:

<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>

To make a link button wich turns its color when the mouse is over. And I have a set of buttons with this style, I want to be able to, once the user has clicked the mouse, change the button foreground to the second value, unless he clicks another button.

It is posible to do this just by using the style? I don’t believe it, but I’m novice with WPF or, how would you implement this feature.

Thanks in advance.

Solution

As suggested by @Phil, the solution was to use a container, a listbox in this case, styled as:

<!-- 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

Here’s an idea to get you started

Style a list box so that the list box items look like your link buttons:

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; }
}