0

我正在尝试重现此工具栏拇指的拇指样式： 在此处输入图像描述

这就是我意识到的：

在此处输入图像描述

这是我的代码：

<Rectangle >
                                <Rectangle.Fill>
                                    <DrawingBrush Viewbox="7,7,6,6" Viewport="3,7,4,4" TileMode="Tile" ViewboxUnits="Absolute" ViewportUnits="Absolute">
                                        <DrawingBrush.Drawing>
                                            <DrawingGroup>
                                                <GeometryDrawing Brush="#FF3C3C3C" Geometry="M4,4L4,8 8,8 8,4z">

                                                </GeometryDrawing>

                                            </DrawingGroup>
                                        </DrawingBrush.Drawing>
                                    </DrawingBrush>
                                </Rectangle.Fill>
                            </Rectangle>

如您所见，中间的“点条”不见了。我真的不知道如何使用 GeometryDrawing 对象。

我该怎么做才能添加这个缺失的栏？

谢谢，

让-巴蒂斯特

4

2 回答 2

2

说真的，我今天早些时候花了一些时间来解决这个问题。我想出的是，当我在 photoshop 中放大 1600% 并截取 Visual Studio 工具栏和这个渐变时，它们完全匹配。

其中一个技巧实际上是点的颜色是黑色。我用偏移灰色尝试了几个小时。

这是我的工具栏的屏幕截图。

在此处输入图像描述

试试这个画笔。

<!-- Drag Thumb  Drawing brush-->
<DrawingBrush x:Key="vs2012Grip"
            Viewbox="1,1,6,6" 
            Viewport="1,1,4,4" 
            TileMode="Tile" 
            ViewboxUnits="Absolute" 
            ViewportUnits="Absolute">
    <DrawingBrush.Drawing>
        <DrawingGroup>
            <GeometryDrawing Brush="#FF000000" 
                                Geometry="M 3,3L3,4 4,4 4,3z">

            </GeometryDrawing>
            <GeometryDrawing Brush="#FF000000" 
                                Geometry="M6,6L6,7 7,7 7,6z" >

            </GeometryDrawing>
        </DrawingGroup>
    </DrawingBrush.Drawing>
</DrawingBrush>

这是我对工具栏的完整实现，其中包含所有样式以使其模仿 VS2012 样式。我已经省略了按钮，但这很简单。

<!-- Brushes-->
<Color x:Key="BaseGray">#FFEFEFF2</Color>
<Color x:Key="PressBlue">#FF007ACC</Color>

<SolidColorBrush x:Key="PressBrush" Color="{StaticResource PressBlue}" />
<SolidColorBrush x:Key="BaseGrayBrush" Color="{StaticResource BaseGray}" />

<!-- Drag Thumb  Drawing brush-->
<DrawingBrush x:Key="vs2012Grip"
            Viewbox="1,1,6,6" 
            Viewport="1,1,4,4" 
            TileMode="Tile" 
            ViewboxUnits="Absolute" 
            ViewportUnits="Absolute">
    <DrawingBrush.Drawing>
        <DrawingGroup>
            <GeometryDrawing Brush="#FF000000" 
                                Geometry="M 3,3L3,4 4,4 4,3z">

            </GeometryDrawing>
            <GeometryDrawing Brush="#FF000000" 
                                Geometry="M6,6L6,7 7,7 7,6z" >

            </GeometryDrawing>
        </DrawingGroup>
    </DrawingBrush.Drawing>
</DrawingBrush>

<!-- Drag thumb toolbar style -->
<Style x:Key="ToolBarThumbStyle" TargetType="{x:Type Thumb}">
    <Setter Property="OverridesDefaultStyle" Value="true" />
    <Setter Property="Cursor" Value="SizeAll" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Thumb}">
                <Border Background="Transparent" SnapsToDevicePixels="True">
                    <Rectangle Height="17" Width="5" Margin="7,0,3,0" Fill="{StaticResource vs2012Grip}" />
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<!-- The overflow button style. VS2012 Style -->
<Style x:Key="BaseToolBarOverflowButtonStyle" TargetType="ToggleButton">
    <Setter Property="OverridesDefaultStyle" Value="true" />
    <Setter Property="Background" Value="{StaticResource BaseGrayBrush}" />

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ToggleButton">
                <Border x:Name="Border" 
                        Background="{TemplateBinding Background}"
                        CornerRadius="0"  
                        SnapsToDevicePixels="true">
                    <Grid>
                        <Rectangle Name="Line" Fill="Black" Height="1.25" VerticalAlignment="Bottom" Margin="0,0,0,8" Width="6"  />
                        <Path x:Name="Arrow" Fill="Black" VerticalAlignment="Bottom" Margin="2,3" Data="M 0 3 L 6 3 L 3 6  Z" />
                        <ContentPresenter />
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="White" />
                        <Setter Property="Fill" TargetName="Line" Value="{StaticResource PressBrush}" />
                        <Setter Property="Fill" TargetName="Arrow" Value="{StaticResource PressBrush}" />
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter Property="Background" Value="{StaticResource PressBrush}" />
                        <Setter Property="Fill" TargetName="Line" Value="White" />
                        <Setter Property="Fill" TargetName="Arrow" Value="White" />
                    </Trigger>
                    <Trigger Property="IsChecked" Value="True">
                        <Setter Property="Background" Value="{StaticResource PressBrush}" />
                        <Setter Property="Fill" TargetName="Line" Value="White" />
                        <Setter Property="Fill" TargetName="Arrow" Value="White" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>

</Style>

<!--  ReTemplate the toolbar. Changes the backgroud, drag thum and overflow and button state -->
<Style TargetType="ToolBar" x:Key="BaseBar">
    <Setter Property="SnapsToDevicePixels" Value="true" />
    <Setter Property="OverridesDefaultStyle" Value="true" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ToolBar}">
                <Border x:Name="Border" CornerRadius="2" BorderThickness="0">
                    <Border.Background>
                        <SolidColorBrush Color="{StaticResource BaseGray}" />
                    </Border.Background>
                    <DockPanel>
                        <ToggleButton DockPanel.Dock="Right" 
                                        IsEnabled="{TemplateBinding HasOverflowItems}"
                                        Style="{StaticResource BaseToolBarOverflowButtonStyle}" 
                                        ClickMode="Press"
                                        IsChecked="{Binding IsOverflowOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}">
                            <Popup x:Name="OverflowPopup" 
                                    AllowsTransparency="true" 
                                    Placement="Bottom" 
                                    StaysOpen="false"
                                    Focusable="false" 
                                    PopupAnimation="Slide" 
                                    IsOpen="{Binding IsOverflowOpen, RelativeSource={RelativeSource TemplatedParent}}">
                                <Border x:Name="DropDownBorder" Background="{StaticResource BaseGrayBrush}" BorderThickness="1" BorderBrush="#FF494949">
                                    <ToolBarOverflowPanel x:Name="PART_ToolBarOverflowPanel" Margin="2" WrapWidth="200" Focusable="true" FocusVisualStyle="{x:Null}" KeyboardNavigation.TabNavigation="Cycle" KeyboardNavigation.DirectionalNavigation="Cycle" />
                                </Border>
                            </Popup>
                        </ToggleButton>
                        <Thumb x:Name="ToolBarThumb" Style="{StaticResource ToolBarThumbStyle}" />
                        <ToolBarPanel x:Name="PART_ToolBarPanel" IsItemsHost="true" Margin="0,1,2,2" />
                    </DockPanel>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsOverflowOpen" Value="true">
                        <Setter TargetName="ToolBarThumb" Property="IsEnabled" Value="false" />
                    </Trigger>
                    <Trigger Property="ToolBarTray.IsLocked" Value="true">
                        <Setter TargetName="ToolBarThumb" Property="Visibility" Value="Collapsed" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<!-- Set the tool bar tray background -->
<Style TargetType="ToolBarTray" x:Key="BaseToolBarTray">
    <Setter Property="Background">
        <Setter.Value>
            <SolidColorBrush Color="{StaticResource BaseGray}" />
        </Setter.Value>
    </Setter>
</Style>

然后就可以轻松使用了。

<ToolBarTray Style="{StaticResource BaseToolBarTray}" HorizontalAlignment="Stretch" IsLocked="False" VerticalAlignment="Top">
    <ToolBar Style="{StaticResource BaseBar}" ToolBarTray.IsLocked="False">
    </ToolBar>

希望这可以帮助...

于 2013-10-16T10:17:44.887 回答
0

我不太确定，因为我从未使用过这些控件之一，但是您所说的那些“点条”实际上不是控件的一部分吗？我相信如果您将ToolBarTray.IsLocked属性设置为False，那么它们应该会出现，因为它们在那里让用户知道他们可以重新ToolBar排列ToolBarTray.

如果您不使用ToolBarTray对象，那么您只需添加一个，然后在其中添加您的ToolBar对象。您可以通过 MSDN 上的ToolBarTray 类页面中的 XAML 示例了解更多信息。

于 2013-10-16T09:46:31.583 回答