[C#/WPF] ControlTemplate 엘리먼트 : ScrollViewer 엘리먼트 정의하기

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

▶ 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"
    xmlns:local="clr-namespace:TestProject"
    Width="800"
    Height="600"
    Title="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <Color x:Key="BorderMediumColorKey">#ff888888</Color>
        <Style x:Key="LeftScrollViewerStyleKey" TargetType="{x:Type ScrollViewer}">
            <Setter Property="OverridesDefaultStyle" Value="True" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ScrollViewer}">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition               />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition              />
                            </Grid.ColumnDefinitions>
                            <Border Grid.Column="1"
                            BorderThickness="0 1 1 1">
                                <Border.BorderBrush>
                                    <SolidColorBrush Color="{DynamicResource BorderMediumColorKey}" />
                                </Border.BorderBrush>
                                <ScrollContentPresenter CanContentScroll="{TemplateBinding CanContentScroll}" />
                            </Border>
                            <ScrollBar Name="PART_VerticalScrollBar"
                             ViewportSize="{TemplateBinding ViewportHeight}"
                             Maximum="{TemplateBinding ScrollableHeight}"
                             Value="{TemplateBinding VerticalOffset}"
                             Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" />
                            <ScrollBar Name="PART_HorizontalScrollBar" Grid.Row="1" Grid.Column="1"
                            ViewportSize="{TemplateBinding ViewportWidth}"
                            Orientation="Horizontal"
                            Maximum="{TemplateBinding ScrollableWidth}"
                            Value="{TemplateBinding HorizontalOffset}"
                            Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <ScrollViewer Style="{StaticResource LeftScrollViewerStyleKey}">
        <StackPanel>
            <Ellipse
                Margin="10"
                Width="300"
                Height="300"
                Fill="Red" />
            <Ellipse
                Margin="10"
                Width="300"
                Height="300"
                Fill="Green" />
            <Ellipse
                Margin="10"
                Width="300"
                Height="300"
                Fill="Blue" />
        </StackPanel>
    </ScrollViewer>
</Window>

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:local="clr-namespace:TestProject"

Width="800"

Height="600"

Title="TestProject"

FontFamily="나눔고딕코딩"

FontSize="16">

<Window.Resources>

<Setter.Value>

<Grid>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Border Grid.Column="1"

BorderThickness="0 1 1 1">

<Border.BorderBrush>

</Border.BorderBrush>

</Border>

<ScrollBar Name="PART_VerticalScrollBar"

ViewportSize="{TemplateBinding ViewportHeight}"

Maximum="{TemplateBinding ScrollableHeight}"

Value="{TemplateBinding VerticalOffset}"

Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" />

<ScrollBar Name="PART_HorizontalScrollBar" Grid.Row="1" Grid.Column="1"

ViewportSize="{TemplateBinding ViewportWidth}"

Orientation="Horizontal"

Maximum="{TemplateBinding ScrollableWidth}"

Value="{TemplateBinding HorizontalOffset}"

Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" />

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</Window.Resources>

<Ellipse

Margin="10"

Width="300"

Height="300"

Fill="Red" />

<Ellipse

Margin="10"

Width="300"

Height="300"

Fill="Green" />

<Ellipse

Margin="10"

Width="300"

Height="300"

Fill="Blue" />

</StackPanel>

</ScrollViewer>

</Window>

TestProject.zip