Question

Is there a control I can use to make navigation/selection like the one under Outlook Options (left “menu”) in WPF? Or do I need to restyle a tabcontrol or something like that, and if so, is there an example out there to make it look like Outlook Options?

Answer 1

I ended up restyling a ListBox, here is the code:

    <Grid x:Name="layoutRoot">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="100" />
        <ColumnDefinition Width="5" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <ListBox>
        <ListBox.Resources>
            <LinearGradientBrush x:Key="MouseOverBrush" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFFFFFFF" Offset="0" />
                <GradientStop Color="#FFFEF3B5" Offset="0.318" />
                <GradientStop Color="#FFFFEB70" Offset="0.488" />
                <GradientStop Color="#FFFFE48A" Offset="0.502" />
                <GradientStop Color="#FFFFD932" Offset="0.834" />
                <GradientStop Color="#FFFFF48B" Offset="1" />
            </LinearGradientBrush>
            <LinearGradientBrush x:Key="MouseOverBorderBrush" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFEEE8CF" Offset="0" />
                <GradientStop Color="#FFC4AF8C" Offset="0.536" />
                <GradientStop Color="#FFDCD1BF" Offset="1" />
            </LinearGradientBrush>
            <LinearGradientBrush x:Key="PressedBrush" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFC3BCAE" Offset="0" />
                <GradientStop Color="#FFFFE48A" Offset="0.046" />
                <GradientStop Color="#FFFFE48A" Offset="0.452" />
                <GradientStop Color="#FFFFE48A" Offset="0.461" />
                <GradientStop Color="#FFFFD932" Offset="0.724" />
                <GradientStop Color="#FFFFF48B" Offset="1" />
            </LinearGradientBrush>
            <LinearGradientBrush x:Key="PressedBorderBrush" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFC2762B" Offset="0" />
                <GradientStop Color="#FFC29E47" Offset="1" />
            </LinearGradientBrush>

            <SolidColorBrush x:Key="DisabledForegroundBrush" Color="#888" />

            <Style TargetType="{x:Type ListBox}">
                <Setter Property="BorderBrush" Value="{DynamicResource {x:Static SystemColors.ActiveBorderBrushKey}}"/>
                <Setter Property="Padding" Value="1"/>
            </Style>

            <Style TargetType="ListBoxItem">
                <Setter Property="FocusVisualStyle" Value="{x:Null}" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ListBoxItem">
                            <Border x:Name="OuterBorder" Margin="1" BorderThickness="1" CornerRadius="3" BorderBrush="Transparent" Background="Transparent">
                                <Border x:Name="InnerBorder" BorderThickness="1" CornerRadius="2" BorderBrush="Transparent" Background="Transparent">
                                    <ContentPresenter x:Name="Content" Margin="10,3,10,3" />
                                </Border>
                            </Border>

                            <ControlTemplate.Triggers>
                                <Trigger Property="IsEnabled" Value="False">
                                    <Setter Property="Foreground" Value="{DynamicResource DisabledForegroundBrush}" />
                                </Trigger>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter TargetName="OuterBorder" Property="BorderBrush" Value="{DynamicResource MouseOverBorderBrush}" />
                                    <Setter TargetName="OuterBorder" Property="Background" Value="{DynamicResource MouseOverBrush}" />
                                </Trigger>
                                <MultiTrigger>
                                    <MultiTrigger.Conditions>
                                        <Condition Property="IsSelected" Value="True" />
                                        <Condition Property="IsMouseOver" Value="False" />
                                    </MultiTrigger.Conditions>
                                    <Setter TargetName="OuterBorder" Property="BorderBrush" Value="{DynamicResource PressedBorderBrush}" />
                                    <Setter TargetName="OuterBorder" Property="Background" Value="{DynamicResource PressedBrush}" />
                                </MultiTrigger>
                                <MultiTrigger>
                                    <MultiTrigger.Conditions>
                                        <Condition Property="IsSelected" Value="True" />
                                        <Condition Property="IsMouseOver" Value="True" />
                                    </MultiTrigger.Conditions>
                                    <Setter TargetName="OuterBorder" Property="BorderBrush" Value="{DynamicResource PressedBorderBrush}" />
                                    <Setter TargetName="OuterBorder" Property="Background" Value="{DynamicResource PressedBrush}" />
                                </MultiTrigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ListBox.Resources>

        <ListBoxItem IsSelected="True">Item 1</ListBoxItem>
        <ListBoxItem>Item 2</ListBoxItem>
        <ListBoxItem>Itme 3</ListBoxItem>
        <ListBoxItem>Item 4</ListBoxItem>
        <ListBoxItem>Item 5</ListBoxItem>
        <ListBoxItem IsEnabled="False">
            <Separator Margin="-5,0,-5,0" />
        </ListBoxItem>
        <ListBoxItem>Item 6</ListBoxItem>
        <ListBoxItem IsEnabled="False">Item 7</ListBoxItem>
        <ListBoxItem>Item 8</ListBoxItem>
        <ListBoxItem>Item 9</ListBoxItem>
    </ListBox>

    <Border Grid.Column="2" BorderBrush="{DynamicResource {x:Static SystemColors.ActiveBorderBrushKey}}" BorderThickness="1">
        <Grid></Grid>
    </Border>
</Grid>