Создание элемента ScrollViewer

Последнее обновление: 21.09.2011

Чтобы сделать пользовательский элемент ScrollViewer или ScrollBar, надо переопределить шаблоны (ControlTemplate) этих элементов

Разметка XAML

<Window x:Class="MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:cl="clr-namespace:System.Collections;assembly=mscorlib"
    xmlns:sys="clr-namespace:System;assembly=mscorlib"
    xmlns:local="clr-namespace:WpfExp"
    Title="Custom ScrollViewer" Height="250" Width="300">
    <Window.Resources>
        <cl:ArrayList x:Key="ar">
            <local:Team country="Россия" place="1" score="23"></local:Team>
            <local:Team country="Армения" place="2" score="20"></local:Team>
            <local:Team country="Ирландия" place="3" score="18"></local:Team>
            <local:Team country="Словакия" place="4" score="17"></local:Team>
            <local:Team country="Македония" place="5" score="5"></local:Team>
            <local:Team country="Андорра" place="6" score="0"></local:Team>
        </cl:ArrayList> 

        <Style x:Key="ScrollBarThumbStyle" TargetType="Thumb">
            <Setter Property="IsTabStop" Value="False" />
            <Setter Property="Focusable" Value="False" />
            <Setter Property="Margin" Value="1,0,1,0" />
            <Setter Property="Background" Value="Red" />
            <Setter Property="BorderBrush" Value="Black" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Thumb">
                        <Ellipse Fill="Blue" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
         </Style>              
        
        <Style x:Key="ScrollBarPageButtonStyle" TargetType="RepeatButton">
            <Setter Property="IsTabStop" Value="False" />
            <Setter Property="Focusable" Value="False" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="RepeatButton">
                        <Border Background="Transparent" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        
        <Style x:Key="ScrollBarLineButtonStyle" TargetType="RepeatButton">
            <Setter Property="Focusable" Value="False" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="RepeatButton">
                        <Grid Margin="1">
                            <Ellipse Name="Border" StrokeThickness="2" Stroke="Black" Fill="Gray" />
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter TargetName="Border" Property="Fill" Value="Blue" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <ControlTemplate x:Key="scroll" TargetType="ScrollBar">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="18" />
                    <RowDefinition Height="*" />
                    <RowDefinition Height="18" />
                </Grid.RowDefinitions>
                
                <RepeatButton Grid.Row="0" Height="18" Style="{StaticResource ScrollBarLineButtonStyle}"
                              Command="ScrollBar.LineUpCommand">
                    <Path Fill="Red" Data="M 0 4 L 8 4 L 4 0 Z" />
                </RepeatButton>
                <Track Grid.Row="1" ViewportSize="0" IsDirectionReversed="True" x:Name="PART_Track">
                    <Track.DecreaseRepeatButton>
                        <RepeatButton Command="ScrollBar.PageUpCommand" Style="{StaticResource ScrollBarPageButtonStyle}">
                            
                        </RepeatButton>
                    </Track.DecreaseRepeatButton>
                    <Track.Thumb>
                        <Thumb Style="{StaticResource ScrollBarThumbStyle}" />
                    </Track.Thumb>
                    <Track.IncreaseRepeatButton>
                        <RepeatButton Command="ScrollBar.PageDownCommand"  Style="{StaticResource ScrollBarPageButtonStyle}">
                            
                        </RepeatButton>
                    </Track.IncreaseRepeatButton>
                </Track>
                <RepeatButton Command="{x:Static ScrollBar.LineDownCommand}" Grid.Row="3" Height="18"  Style="{StaticResource ScrollBarLineButtonStyle}">
                    <Path Fill="Red" Data="M 0 0 L 4 4 L 8 0 Z" />
                 </RepeatButton>
            </Grid>
        </ControlTemplate>

        <Style TargetType="ScrollViewer">
            <Setter Property="HorizontalContentAlignment" Value="Left" />
            <Setter Property="VerticalContentAlignment" Value="Top" />
            <Setter Property="VerticalScrollBarVisibility" Value="Visible" />
            <Setter Property="Padding" Value="4"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="BorderBrush">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FFA3AEB9" Offset="0"/>
                        <GradientStop Color="#FF8399A9" Offset="0.375"/>
                        <GradientStop Color="#FF718597" Offset="0.375"/>
                        <GradientStop Color="#FF617584" Offset="1"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ScrollViewer">
                        <Border CornerRadius="2" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                            <Grid Background="{TemplateBinding Background}">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>

                                <ScrollContentPresenter x:Name="ScrollContentPresenter"
                                                  Cursor="{TemplateBinding Cursor}"
                                                  Margin="{TemplateBinding Padding}"
                                                  ContentTemplate="{TemplateBinding ContentTemplate}"/>
                                 
                                <Rectangle Grid.Column="1" Grid.Row="1" Fill="#FFE9EEF4"/>

                                <ScrollBar Name="PART_VerticalScrollBar" Width="18"
                                     IsTabStop="False"
                                     Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
                                     Grid.Column="1" Grid.Row="0" Orientation="Vertical"
                                     ViewportSize="{TemplateBinding ViewportHeight}"
                                     Maximum="{TemplateBinding ScrollableHeight}"
                                     Minimum="0"
                                     Value="{TemplateBinding VerticalOffset}"
                                     Margin="0,-1,-1,-1" Template="{StaticResource scroll}" 
                                           SnapsToDevicePixels="True" OverridesDefaultStyle="True"/>

                                <ScrollBar Name="PART_HorizontalScrollBar" Height="18"
                                     IsTabStop="False"
                                     Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
                                     Grid.Column="0" Grid.Row="1" Orientation="Horizontal"
                                     ViewportSize="{TemplateBinding ViewportWidth}"
                                     Maximum="{TemplateBinding ScrollableWidth}"
                                     Minimum="0"
                                     Value="{TemplateBinding HorizontalOffset}"
                                     Margin="-1,0,-1,-1"/>

                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style TargetType="ListView">
            <Setter Property="SnapsToDevicePixels" Value="true" />
            <Setter Property="OverridesDefaultStyle" Value="true" />
            <Setter Property="ScrollViewer.CanContentScroll" Value="true" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Border Background="{TemplateBinding Background}">
                            <ScrollViewer>
                                <ItemsPresenter Margin="2"></ItemsPresenter>
                            </ScrollViewer>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid Background="Black">
        <TextBlock Background="Black" Height="20" VerticalAlignment="Top" Foreground="White">Отборочная группа на Чемпионат Европы 2012</TextBlock>
        <ListView Name="lview" Background="White"  VerticalAlignment="Top" Margin="0 20 0 30" ItemsSource="{DynamicResource ResourceKey=ar}" Height="110">
            <ListView.View>
                <GridView>
                    <GridViewColumn DisplayMemberBinding="{Binding Path=place}">Место</GridViewColumn>
                    <GridViewColumn DisplayMemberBinding="{Binding Path=country}">Страна</GridViewColumn>
                    <GridViewColumn DisplayMemberBinding="{Binding Path=score}">Очки</GridViewColumn>
                </GridView>
            </ListView.View>
        </ListView>
    </Grid>
</Window>

Результат работы на следующем рисунке:

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850