像WPF中的Outlook选项一样导航

时间:2011-11-06 16:43:28

标签: wpf wpf-controls

我是否可以使用控件进行导航/选择,如WPF中的Outlook选项(左侧“菜单”)下的导航/选择?或者我是否需要重新设置tabcontrol或类似的东西,如果有的话,是否有一个例子让它看起来像Outlook选项?

2 个答案:

答案 0 :(得分:3)

我最终重新整理了ListBox,这是代码:

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

答案 1 :(得分:0)

这是一个WPF控件,它封装了MS Outlook NavigationPane功能。

查看此链接http://navigationpane.codeplex.com/ 它完全支持WPF样式,因此如果你是一个深入你的艺术家,你可以通过自己的图形偏好对其进行样式化。 它带有默认风格,更像是Outllok 2010。