xaml - Metro アプリのリストボックスのスクロールバーをカスタマイズする

Question

私たちの Metro スタイル アプリでは、リストボックスを使用していて、そのスクロールバーをカスタマイズしたいと考えています。これは、スクロールの高さ、幅、および色 (水平および垂直) を意味します。このタスクを実行する例はありますか?? 私はたくさん検索しましたが、例を得ることができませんでした.助けてください.

Answer 1

最初に自分自身をカスタマイズしてからScrollViewer、それを のスタイルに追加する必要がありますListBox。以下はListBoxのデフォルト スタイルで、その後はScrollViewerのデフォルト スタイルです。

<Style TargetType="ListBox">
  <Setter Property="Foreground" Value="{StaticResource ListBoxForegroundThemeBrush}" />
  <Setter Property="Background" Value="{StaticResource ListBoxBackgroundThemeBrush}" />
  <Setter Property="BorderBrush" Value="{StaticResource ListBoxBorderThemeBrush}" />
  <Setter Property="BorderThickness" Value="{StaticResource ListBoxBorderThemeThickness}" />
  <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
  <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
  <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled" />
  <Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="True" />
  <Setter Property="ScrollViewer.VerticalScrollMode" Value="Enabled" />
  <Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="True" />
  <Setter Property="ScrollViewer.ZoomMode" Value="Disabled" />
  <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False" />
  <Setter Property="ScrollViewer.BringIntoViewOnFocusChange" Value="True" />
  <Setter Property="IsTabStop" Value="False" />
  <Setter Property="TabNavigation" Value="Once" />
  <Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}" />
  <Setter Property="FontSize" Value="{StaticResource ControlContentThemeFontSize}" />
  <Setter Property="ItemsPanel">
    <Setter.Value>
      <ItemsPanelTemplate>
        <VirtualizingStackPanel />
      </ItemsPanelTemplate>
    </Setter.Value>
  </Setter>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="ListBox">
        <Border x:Name="LayoutRoot" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
          <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
              <VisualState x:Name="Normal" />
              <VisualState x:Name="Disabled">
                <Storyboard>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Background">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
                  </ObjectAnimationUsingKeyFrames>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="BorderBrush">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListBoxDisabledForegroundThemeBrush}" />
                  </ObjectAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
            </VisualStateGroup>
            <VisualStateGroup x:Name="FocusStates">
              <VisualState x:Name="Focused">
                <Storyboard>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Background">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListBoxFocusBackgroundThemeBrush}" />
                  </ObjectAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
              <VisualState x:Name="Unfocused" />
            </VisualStateGroup>
          </VisualStateManager.VisualStateGroups>
          <ScrollViewer x:Name="ScrollViewer" Padding="{TemplateBinding Padding}" TabNavigation="{TemplateBinding TabNavigation}" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}">
            <ItemsPresenter />
          </ScrollViewer>
        </Border>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

<Style TargetType="ScrollViewer">
  <Setter Property="HorizontalScrollMode" Value="Enabled" />
  <Setter Property="VerticalScrollMode" Value="Enabled" />
  <Setter Property="IsHorizontalRailEnabled" Value="True" />
  <Setter Property="IsVerticalRailEnabled" Value="True" />
  <Setter Property="IsTabStop" Value="False" />
  <Setter Property="ZoomMode" Value="Enabled" />
  <Setter Property="HorizontalContentAlignment" Value="Left" />
  <Setter Property="VerticalContentAlignment" Value="Top" />
  <Setter Property="VerticalScrollBarVisibility" Value="Visible" />
  <Setter Property="Padding" Value="0" />
  <Setter Property="BorderThickness" Value="0" />
  <Setter Property="BorderBrush" Value="Transparent" />
  <Setter Property="Background" Value="Transparent" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="ScrollViewer">
        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
          <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="ScrollingIndicatorStates">
              <VisualStateGroup.Transitions>
                <VisualTransition From="MouseIndicator" To="NoIndicator">
                  <Storyboard>
                    <FadeOutThemeAnimation TargetName="ScrollBarSeparator" BeginTime="0:0:3" />
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalScrollBar" Storyboard.TargetProperty="IndicatorMode">
                      <DiscreteObjectKeyFrame KeyTime="0:0:3">
                        <DiscreteObjectKeyFrame.Value>
                          <ScrollingIndicatorMode>None</ScrollingIndicatorMode>
                        </DiscreteObjectKeyFrame.Value>
                      </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalScrollBar" Storyboard.TargetProperty="IndicatorMode">
                      <DiscreteObjectKeyFrame KeyTime="0:0:3">
                        <DiscreteObjectKeyFrame.Value>
                          <ScrollingIndicatorMode>None</ScrollingIndicatorMode>
                        </DiscreteObjectKeyFrame.Value>
                      </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                  </Storyboard>
                </VisualTransition>
                <VisualTransition From="TouchIndicator" To="NoIndicator">
                  <Storyboard>
                    <FadeOutThemeAnimation TargetName="ScrollBarSeparator" />
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalScrollBar" Storyboard.TargetProperty="IndicatorMode">
                      <DiscreteObjectKeyFrame KeyTime="0:0:0.5">
                        <DiscreteObjectKeyFrame.Value>
                          <ScrollingIndicatorMode>None</ScrollingIndicatorMode>
                        </DiscreteObjectKeyFrame.Value>
                      </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalScrollBar" Storyboard.TargetProperty="IndicatorMode">
                      <DiscreteObjectKeyFrame KeyTime="0:0:0.5">
                        <DiscreteObjectKeyFrame.Value>
                          <ScrollingIndicatorMode>None</ScrollingIndicatorMode>
                        </DiscreteObjectKeyFrame.Value>
                      </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                  </Storyboard>
                </VisualTransition>
              </VisualStateGroup.Transitions>
              <VisualState x:Name="NoIndicator">
                <Storyboard>
                  <FadeOutThemeAnimation TargetName="ScrollBarSeparator" />
                </Storyboard>
              </VisualState>
              <VisualState x:Name="TouchIndicator">
                <Storyboard>
                  <FadeOutThemeAnimation TargetName="ScrollBarSeparator" />
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalScrollBar" Storyboard.TargetProperty="IndicatorMode" Duration="0">
                    <DiscreteObjectKeyFrame KeyTime="0">
                      <DiscreteObjectKeyFrame.Value>
                        <ScrollingIndicatorMode>TouchIndicator</ScrollingIndicatorMode>
                      </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                  </ObjectAnimationUsingKeyFrames>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalScrollBar" Storyboard.TargetProperty="IndicatorMode" Duration="0">
                    <DiscreteObjectKeyFrame KeyTime="0">
                      <DiscreteObjectKeyFrame.Value>
                        <ScrollingIndicatorMode>TouchIndicator</ScrollingIndicatorMode>
                      </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                  </ObjectAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
              <VisualState x:Name="MouseIndicator">
                <Storyboard>
                  <FadeInThemeAnimation TargetName="ScrollBarSeparator" />
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalScrollBar" Storyboard.TargetProperty="IndicatorMode" Duration="0">
                    <DiscreteObjectKeyFrame KeyTime="0">
                      <DiscreteObjectKeyFrame.Value>
                        <ScrollingIndicatorMode>MouseIndicator</ScrollingIndicatorMode>
                      </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                  </ObjectAnimationUsingKeyFrames>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalScrollBar" Storyboard.TargetProperty="IndicatorMode" Duration="0">
                    <DiscreteObjectKeyFrame KeyTime="0">
                      <DiscreteObjectKeyFrame.Value>
                        <ScrollingIndicatorMode>MouseIndicator</ScrollingIndicatorMode>
                      </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                  </ObjectAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
            </VisualStateGroup>
          </VisualStateManager.VisualStateGroups>
          <Grid Background="{TemplateBinding Background}">
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="*" />
              <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
              <RowDefinition Height="*" />
              <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <ScrollContentPresenter x:Name="ScrollContentPresenter" Grid.RowSpan="2" Grid.ColumnSpan="2" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="{TemplateBinding Padding}" />
            <ScrollBar x:Name="VerticalScrollBar" Grid.Column="1" IsTabStop="False" Maximum="{TemplateBinding ScrollableHeight}" Orientation="Vertical" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{TemplateBinding VerticalOffset}" ViewportSize="{TemplateBinding ViewportHeight}" HorizontalAlignment="Right" />
            <ScrollBar x:Name="HorizontalScrollBar" IsTabStop="False" Maximum="{TemplateBinding ScrollableWidth}" Orientation="Horizontal" Grid.Row="1" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{TemplateBinding HorizontalOffset}" ViewportSize="{TemplateBinding ViewportWidth}" />
            <Border x:Name="ScrollBarSeparator" Grid.Row="1" Grid.Column="1" BorderThickness="0,0,1,1" Background="{StaticResource ScrollBarTrackBackgroundThemeBrush}" BorderBrush="{StaticResource ScrollBarTrackBorderThemeBrush}" />
          </Grid>
        </Border>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>