첨부 실행 코드는 나눔고딕코딩 폰트를 사용합니다.
728x90
반응형
728x170

■ ControlTemplate 엘리먼트를 사용해 ToolBar 엘리먼트를 정의하는 방법을 보여준다.

TestProject.zip
0.01MB

▶ MainWindow.xaml

<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800"
    Height="600"
    Title="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <Color x:Key="WindowColorKey">#ffe8edf9</Color>
        <Color x:Key="DisabledControlDarkColorKey">#ffc5cbf9</Color>
        <Color x:Key="ControlLightColorKey">White</Color>
        <Color x:Key="ControlMediumColorKey">#ff7381f9</Color>
        <Color x:Key="ControlMouseOverColorKey">#ff3843c4</Color>
        <Color x:Key="ControlPressedColorKey">#ff211aa9</Color>
        <Color x:Key="BorderLightColorKey">#ffcccccc</Color>
        <Color x:Key="BorderMediumColorKey">#ff888888</Color>
        <Color x:Key="BorderDarkColorKey">#ff444444</Color>
        <Color x:Key="DisabledBorderLightColorKey">#ffaaaaaa</Color>
        <Style x:Key="ToolBarButtonBaseStyleKey" TargetType="{x:Type ButtonBase}">
            <Setter Property="SnapsToDevicePixels"   Value="true" />
            <Setter Property="OverridesDefaultStyle" Value="true" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ButtonBase}">
                        <Border Name="border"
                            BorderThickness="1">
                            <Border.BorderBrush>
                            <LinearGradientBrush
                                StartPoint="0.5 0"
                                EndPoint="0.5 1">
                                <GradientStop Offset="0" Color="{DynamicResource BorderLightColorKey}"  />
                                <GradientStop Offset="1" Color="{DynamicResource BorderMediumColorKey}" />
                            </LinearGradientBrush>
                            </Border.BorderBrush>
                            <Border.Background>
                                <LinearGradientBrush
                                    StartPoint="0.5 0"
                                    EndPoint="0.5 1">
                                    <GradientStop Offset="0" Color="{DynamicResource ControlLightColorKey}"  />
                                    <GradientStop Offset="1" Color="{DynamicResource ControlMediumColorKey}" />
                                </LinearGradientBrush>
                            </Border.Background>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup Name="CommonStates">
                                    <VisualState Name="Normal" />
                                    <VisualState Name="Pressed">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="border"
                                                Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlPressedColorKey}" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState Name="MouseOver">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="border"
                                                Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlMouseOverColorKey}" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState Name="Disabled">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="border"
                                                Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource DisabledControlDarkColorKey}" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup Name="CheckStates">
                                    <VisualState Name="Checked">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="border"
                                                Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlPressedColorKey}" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState Name="Unchecked" />
                                    <VisualState Name="Indeterminate" />
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <ContentPresenter
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                Margin="2"
                                RecognizesAccessKey="True" />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="{x:Static ToolBar.ButtonStyleKey}" TargetType="{x:Type Button}"
            BasedOn="{StaticResource ToolBarButtonBaseStyleKey}" />
        <Style x:Key="{x:Static ToolBar.ToggleButtonStyleKey}" TargetType="{x:Type ToggleButton}"
            BasedOn="{StaticResource ToolBarButtonBaseStyleKey}" />
        <Style x:Key="{x:Static ToolBar.CheckBoxStyleKey}" TargetType="{x:Type CheckBox}"
            BasedOn="{StaticResource ToolBarButtonBaseStyleKey}" />
        <Style x:Key="{x:Static ToolBar.RadioButtonStyleKey}" TargetType="{x:Type RadioButton}"
            BasedOn="{StaticResource ToolBarButtonBaseStyleKey}" />
        <Style x:Key="{x:Static ToolBar.TextBoxStyleKey}" TargetType="{x:Type TextBox}">
            <Setter Property="OverridesDefaultStyle"            Value="True"     />
            <Setter Property="FocusVisualStyle"                 Value="{x:Null}" />
            <Setter Property="SnapsToDevicePixels"              Value="True"     />
            <Setter Property="AllowDrop"                        Value="true"     />
            <Setter Property="KeyboardNavigation.TabNavigation" Value="None"     />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TextBox}">
                        <Border Name="border"
                            BorderThickness="1"
                            Padding="2">
                            <Border.Background>
                                <SolidColorBrush Color="{DynamicResource ControlLightColorKey}" />
                            </Border.Background>
                            <Border.BorderBrush>
                                <SolidColorBrush Color="{StaticResource BorderMediumColorKey}" />
                            </Border.BorderBrush>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup Name="CommonStates">
                                    <VisualState Name="Normal" />
                                    <VisualState Name="Disabled">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="border"
                                                Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource DisabledControlDarkColorKey}" />
                                            </ColorAnimationUsingKeyFrames>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="border"
                                                Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource DisabledBorderLightColorKey}" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState Name="ReadOnly"  />
                                    <VisualState Name="MouseOver" />
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <ScrollViewer Name="PART_ContentHost"
                                Margin="0" />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="ToolBarThumbStyleKey" 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 Margin="0 2">
                                <Rectangle.Fill>
                                    <DrawingBrush
                                        ViewboxUnits="Absolute"
                                        Viewbox="0 0 8 8"
                                        ViewportUnits="Absolute"
                                        Viewport="0 0 4 4"
                                        TileMode="Tile">
                                        <DrawingBrush.Drawing>
                                            <DrawingGroup>
                                                <GeometryDrawing
                                                    Brush="#aaa"
                                                    Geometry="M 4 4 L 4 8 L 8 8 L 8 4 z" />
                                            </DrawingGroup>
                                        </DrawingBrush.Drawing>
                                    </DrawingBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="ToolBarOverflowButtonStyleKey" TargetType="{x:Type ToggleButton}">
            <Setter Property="OverridesDefaultStyle" Value="true" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ToggleButton}">
                        <Border Name="border"
                            CornerRadius="0 3 3 0"
                            SnapsToDevicePixels="true">
                            <Border.Background>
                                <LinearGradientBrush
                                    StartPoint="0.5 0"
                                    EndPoint="0.5 1">
                                    <GradientStop Offset="0" Color="#00000000" />
                                    <GradientStop Offset="1"                   />
                                </LinearGradientBrush>
                            </Border.Background>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup Name="CommonStates">
                                    <VisualState Name="Normal" />
                                    <VisualState Name="Pressed">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="border"
                                                Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlPressedColorKey}" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState Name="MouseOver">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="border"
                                                Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlMouseOverColorKey}" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState Name="Disabled">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="border"
                                                Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource DisabledBorderLightColorKey}" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Grid>
                                <Path
                                    VerticalAlignment="Bottom"
                                    Margin="2 3"
                                    Fill="Black"
                                    Data="M -0.5 3 L 5.5 3 L 2.5 6 Z" />
                                <ContentPresenter />
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="{x:Type ToolBar}" TargetType="{x:Type ToolBar}">
            <Setter Property="OverridesDefaultStyle" Value="true" />
            <Setter Property="SnapsToDevicePixels"   Value="true" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ToolBar}">
                        <Border Name="border"
                            CornerRadius="2"
                            BorderThickness="1">
                            <Border.BorderBrush>
                                <LinearGradientBrush
                                    StartPoint="0 0"
                                    EndPoint="0 1">
                                    <LinearGradientBrush.GradientStops>
                                        <GradientStopCollection>
                                            <GradientStop Offset="0.0" Color="{DynamicResource BorderMediumColorKey}" />
                                            <GradientStop Offset="1.0" Color="{DynamicResource BorderDarkColorKey}"   />
                                        </GradientStopCollection>
                                    </LinearGradientBrush.GradientStops>
                                </LinearGradientBrush>
                            </Border.BorderBrush>
                            <Border.Background>
                                <LinearGradientBrush
                                    StartPoint="0 0"
                                    EndPoint="0 1">
                                    <LinearGradientBrush.GradientStops>
                                        <GradientStopCollection>
                                            <GradientStop Offset="0.0" Color="#fff"                                    />
                                            <GradientStop Offset="1.0" Color="{DynamicResource ControlMediumColorKey}" />
                                        </GradientStopCollection>
                                    </LinearGradientBrush.GradientStops>
                                </LinearGradientBrush>
                            </Border.Background>
                            <DockPanel>
                                <ToggleButton DockPanel.Dock="Right"
                                    Style="{StaticResource ToolBarOverflowButtonStyleKey}"
                                    ClickMode="Press"
                                    IsEnabled="{TemplateBinding HasOverflowItems}"
                                    IsChecked="{Binding IsOverflowOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}">
                                    <Popup
                                        Placement="Bottom"
                                        AllowsTransparency="true"
                                        PopupAnimation="Slide"
                                        StaysOpen="false"
                                        Focusable="false"
                                        IsOpen="{Binding IsOverflowOpen, RelativeSource={RelativeSource TemplatedParent}}">
                                        <Border
                                            BorderThickness="1">
                                            <Border.BorderBrush>
                                                <SolidColorBrush Color="{DynamicResource BorderMediumColorKey}" />
                                            </Border.BorderBrush>
                                            <Border.Background>
                                                <LinearGradientBrush
                                                    StartPoint="0.5 0"
                                                    EndPoint="0.5 1">
                                                    <GradientStop            Color="{DynamicResource ControlLightColorKey}"  />
                                                    <GradientStop Offset="1" Color="{DynamicResource ControlMediumColorKey}" />
                                                </LinearGradientBrush>
                                            </Border.Background>
                                            <ToolBarOverflowPanel Name="PART_ToolBarOverflowPanel"
                                                FocusVisualStyle="{x:Null}"
                                                Margin="2"
                                                WrapWidth="200"
                                                Focusable="true"
                                                KeyboardNavigation.TabNavigation="Cycle"
                                                KeyboardNavigation.DirectionalNavigation="Cycle" />
                                        </Border>
                                    </Popup>
                                </ToggleButton>
                                <Thumb Name="toolBarThumb"
                                    Style="{StaticResource ToolBarThumbStyleKey}"
                                    Width="10" />
                                <ToolBarPanel Name="PART_ToolBarPanel"
                                    Margin="0 1 2 2"
                                    IsItemsHost="true" />
                            </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>
        <Style x:Key="{x:Type ToolBarTray}" TargetType="{x:Type ToolBarTray}">
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush
                        StartPoint="0 0"
                        EndPoint="1 0">
                        <LinearGradientBrush.GradientStops>
                            <GradientStopCollection>
                                <GradientStop Offset="0.0" Color="#fff"                             />
                                <GradientStop Offset="1.0" Color="{DynamicResource WindowColorKey}" />
                            </GradientStopCollection>
                        </LinearGradientBrush.GradientStops>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <DockPanel LastChildFill="False">
        <ToolBarTray DockPanel.Dock="Top">
            <ToolBar>
                <Button Content="Button" />
                <CheckBox Content="CheckBox" />
                <TextBox Text="TextBox" />
                <TextBox Text="Disabled TextBox"
                    IsEnabled="False" />
                <ToggleButton Content="ToggleButton" />
                <RadioButton IsChecked="True"
                    Content="RadioButton 1" />
                <RadioButton IsChecked="True"
                    Content="RadioButton 1" />
                <Button Content="Button"
                    ToolBar.OverflowMode="Always" />
                <CheckBox Content="CheckBox"
                    ToolBar.OverflowMode="Always" />
                <TextBox Text="TextBox"
                    ToolBar.OverflowMode="Always" />
            </ToolBar>
        </ToolBarTray>
    </DockPanel>
</Window>
728x90
반응형
그리드형(광고전용)
Posted by icodebroker

댓글을 달아 주세요