1

我一直在努力尝试重新创建在Windows 7中Windows Explorer的Computer部分中使用的部分标题。

（这可以通过打开一个新的资源管理器窗口并选择计算机来找到。视图应该是瓷砖，分组方式应该是类型。这将给出一个“硬盘驱动器”部分。我正在尝试重新创建该 V 形和标题

我创建了以下资源字典：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:Framework.Commons.Controls">

    <Style x:Key="ChevronBase" TargetType="{x:Type Path}">
        <Setter Property="StrokeThickness" Value=".75" />
        <Setter Property="Stretch" Value="Fill" />
        <Setter Property="RenderTransformOrigin" Value="0,0" />
        <Setter Property="Width" Value="6" />
        <Setter Property="VerticalAlignment" Value="Center" />
        <Setter Property="HorizontalAlignment" Value="Left" />
        <Setter Property="Data" Value="M 0 3 L 6 3 L 3 6 Z" />
    </Style>

    <Style x:Key="ChevronOpen"
           BasedOn="{StaticResource ResourceKey=ChevronBase}"
           TargetType="{x:Type Path}">
        <Setter Property="Fill" Value="Black" />
        <Setter Property="LayoutTransform">
            <Setter.Value>
                <TransformGroup>
                    <ScaleTransform />
                    <SkewTransform />
                    <RotateTransform Angle="-45" />
                    <TranslateTransform />
                </TransformGroup>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="ChevronClosed"
           BasedOn="{StaticResource ResourceKey=ChevronBase}"
           TargetType="{x:Type Path}">
        <Setter Property="Stroke" Value="#FF808080" />
        <Setter Property="Fill" Value="Transparent" />
        <Setter Property="LayoutTransform">
            <Setter.Value>
                <TransformGroup>
                    <ScaleTransform />
                    <SkewTransform />
                    <RotateTransform Angle="-90" />
                    <TranslateTransform />
                </TransformGroup>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="ChevronCheckBox" TargetType="{x:Type CheckBox}">
        <Setter Property="SnapsToDevicePixels" Value="true" />
        <Setter Property="OverridesDefaultStyle" Value="true" />
        <Setter Property="IsChecked" Value="True" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type CheckBox}">
                    <Grid Background="Transparent">
                        <Path x:Name="ChevronOpen"
                              Style="{StaticResource ResourceKey=ChevronOpen}"
                              Visibility="Collapsed" />

                        <Path x:Name="ChevronClosed"
                              Style="{StaticResource ResourceKey=ChevronClosed}"
                              Visibility="Collapsed" />

                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CheckStates">
                                <VisualState x:Name="Checked">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ChevronOpen" Storyboard.TargetProperty="(UIElement.Visibility)">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unchecked">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ChevronClosed" Storyboard.TargetProperty="(UIElement.Visibility)">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Indeterminate" />
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

我已将样式添加到复选框中，如下所示：

<Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="25" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>

            <CheckBox x:Name="Xpander" Style="{DynamicResource ResourceKey=ChevronCheckBox}" />

            <ContentPresenter Grid.Column="1"
                              VerticalAlignment="Center"
                              Content="{TemplateBinding Header}"
                              ContentTemplate="{TemplateBinding HeaderTemplate}" />

            <Separator Grid.Column="2"
                       Height="12pt"
                       Margin="7,0,0,0"
                       VerticalAlignment="Center"
                       Visibility="{TemplateBinding LineBreakVisibility}" />

            <ContentPresenter Grid.Row="1"
                              Grid.ColumnSpan="3"
                              Margin="8,5,5,5"
                              Visibility="{Binding ElementName=Xpander,
                                                   Path=IsChecked,
                                                   Converter={StaticResource ResourceKey=BooleanToVisibilityConverter}}" />
        </Grid>

我遇到的问题是雪佛龙总是超级时髦（而不是很好的时髦）。

这是我使用 Path 对象的少数几次之一。是否有什么我做错了，当它与我的其他标题项目一起放置在网格中时，使人字形倾斜变得奇怪？

目前看起来它要么倾斜得太宽，要么布局旋转不正确。我已经尝试在 Expression Blend 4 的空白页面中提出正确的路径，但我只是不了解如何提出正确的路径。我可以使用两个不同的路径数据集，但我认为只需旋转三角形即可。

顺便说一句，我知道我没有当前 Explorer 行为的所有样式。现在我正在尝试模仿折叠和未折叠状态。如果有比使用 CheckBox 并覆盖它的模板更好的方法，我愿意接受建议。

编辑 Windows 7 示例：

Windows 7 示例

左侧显示标题的展开状态，右侧显示折叠状态。顶部是人字形悬停时的部分。

我目前的“超级时髦”雪佛龙（没有荣耀）：

当前标题样式

顶部展开，底部折叠。

快速详细说明我的想法试图实现的目标。我想要有路径并根据复选框的视觉状态（以及后来的鼠标悬停样式的路径）更改其布局旋转、填充和描边。

另一个快速说明，因为这覆盖了复选框 ControlTemplate，所以我将可视状态管理器用于选中和未选中状态。当“复选框”被选中时，它会被展开。当它不是标题时出现折叠。

4

1 回答 1

1

丢弃 Path 对象。使用点设置为三的 RegularPolygon。您将需要 Expression Blend SDK 来获取 RegularPolygon 类。

于 2012-04-21T03:51:11.287 回答