첨부 실행 코드는 나눔고딕코딩 폰트를 사용합니다.
본 블로그는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 블로그 콘텐츠 향상을 위해 쓰여집니다.

728x90
반응형
728x170

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="Slider 엘리먼트 : 커스텀 슬라이더 사용하기"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <Style x:Key="SliderRepeatButtonStyleKey" TargetType="{x:Type RepeatButton}">
            <Setter Property="OverridesDefaultStyle" Value="true"  />
            <Setter Property="IsTabStop"             Value="false" />
            <Setter Property="Focusable"             Value="false" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type RepeatButton}">
                        <Rectangle Fill="Transparent" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="HorizontalSliderThumbStyleKey" TargetType="{x:Type Thumb}">
            <Setter Property="Width"                 Value="14"    />
            <Setter Property="Height"                Value="14"    />
            <Setter Property="OverridesDefaultStyle" Value="true"  />
            <Setter Property="Focusable"             Value="false" />
            <Setter Property="Foreground"            Value="Gray"  />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Thumb}">
                        <Ellipse
                            StrokeThickness="0.8"
                            Stroke="#ff5e5d5d"
                            Fill="#ffaed1ed" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style TargetType="{x:Type Slider}">
            <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"       />
            <Setter Property="Background"                   Value="Transparent" />
            <Setter Property="Foreground"                   Value="#ffc4c4c4"   />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Slider}">
                        <Border
                            BorderThickness="{TemplateBinding BorderThickness}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            Background="{TemplateBinding Background}"
                            SnapsToDevicePixels="true">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition
                                        MinHeight="{TemplateBinding MinHeight}"
                                        Height="Auto" />
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <TickBar Grid.Row="0"
                                    Height="4"
                                    Fill="{TemplateBinding Foreground}"
                                    Placement="Top"
                                    Visibility="Collapsed" />
                                <TickBar Grid.Row="2"
                                    Height="4"
                                    Fill="{TemplateBinding Foreground}"
                                    Placement="Bottom"
                                    Visibility="Collapsed" />
                                <Border Grid.Row="1"
                                    Margin="5,0"
                                    Height="5.0"
                                    CornerRadius="1"
                                    VerticalAlignment="center">
                                    <Grid>
                                        <Border
                                            CornerRadius="0.5"
                                            Background="#fff7f4f4"
                                            Opacity="0.215" />
                                        <Border
                                            Margin="0 0 0.3 0.3"
                                            CornerRadius="0.5"
                                            Background="#ff132e50"
                                            Opacity="0.715" />
                                    </Grid>
                                </Border>
                                <Track Name="PART_Track" Grid.Row="1">
                                    <Track.DecreaseRepeatButton>
                                        <RepeatButton
                                            Style="{StaticResource SliderRepeatButtonStyleKey}"
                                            Command="{x:Static Slider.DecreaseLarge}" />
                                    </Track.DecreaseRepeatButton>
                                    <Track.IncreaseRepeatButton>
                                        <RepeatButton
                                            Style="{StaticResource SliderRepeatButtonStyleKey}"
                                            Command="{x:Static Slider.IncreaseLarge}" />
                                    </Track.IncreaseRepeatButton>
                                    <Track.Thumb>
                                        <Thumb Style="{StaticResource HorizontalSliderThumbStyleKey}" />
                                    </Track.Thumb>
                                </Track>
                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Opacity" Value="0.5" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <Slider
            Width="300"
            Height="20">
        </Slider>
    </Grid>
</Window>
728x90
반응형
그리드형(광고전용)
Posted by icodebroker

댓글을 달아 주세요