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 ツールバーのクリッピングとこのグラデーションが正確に一致するときです。

トリックの 1 つは、実際にはドットの色が黒であることです。オフセットグレーで何時間も試しました。

これが私のツールバーのスクリーンショットです。

ここに画像の説明を入力

この描画ブラシを試してみてください。

<!-- 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再配置できることをユーザーに知らせるために表示されるため、表示されるはずです。ToolBarToolBarTray

オブジェクトを使用していない場合は、ToolBarTrayオブジェクトを追加してから、その中にオブジェクトを追加できますToolBar。詳細については、MSDN のToolBarTray クラスページにある XAML の例を参照してください。

于 2013-10-16T09:46:31.583 に答える