如何正確使用GeometryBrush重現vs2012拇指？ C＃WPF

Question

我正在嘗試重現這個工具欄拇指的拇指樣式：

這就是我意識到的：

這是我的代碼：

<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對象。

我該怎么做才能添加這個缺失的欄？

謝謝，

讓 - 巴蒂斯特

Answer 1

說真的，我今天早些時候花了一些時間研究它。 我想出的是當我在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>

希望這可以幫助...

Answer 2

我當然不確定，因為我從未使用過其中一個控件，但是那些'dot bars'並不是你稱它們實際上是控件的一部分？ 我相信如果你將ToolBarTray.IsLocked屬性設置為False ，那么它們應該出現，因為它們是為了讓用戶知道他們可以在ToolBarTray重新排列ToolBar項。

如果您沒有使用ToolBarTray對象，那么您只需添加一個，然后在其中添加ToolBar對象。 您可以在MSDN上的ToolBarTray類頁面中找到有關XAML示例的更多信息。