colors - 更改滚动条颜色 LongListSelector - WP8

Question

有谁知道如何更改 LongListSelector 的滚动条的颜色。我试图更改 ControlTemplate 上的前景，但没有成功。

Answer 1

LongListSelectors 模板中的可见部分ScrollBar实际上是背景。

因此，将滚动条设置为紫红色。

在模板中设置滚动条的背景，如下所示：

<Style x:Key="LongListSelectorStyle1" TargetType="phone:LongListSelector">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="phone:LongListSelector">
                <Grid Background="{TemplateBinding Background}" d:DesignWidth="480" d:DesignHeight="800">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="ScrollStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition GeneratedDuration="00:00:00.5"/>
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="Scrolling">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="VerticalScrollBar"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="NotScrolling"/>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Grid Margin="{TemplateBinding Padding}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="auto"/>
                        </Grid.ColumnDefinitions>
                        <ViewportControl x:Name="ViewportControl" HorizontalContentAlignment="Stretch" VerticalAlignment="Top" />
                        <ScrollBar x:Name="VerticalScrollBar" Background="Fuchsia" Grid.Column="1" Margin="4,0,4,0" Opacity="0" Orientation="Vertical"/>
                    </Grid>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

然后使用：

<phone:LongListSelector Style="{StaticResource LongListSelectorStyle1" />

Answer 2

ScrollBar 原语的细微差别之一是它的颜色由背景控制，而不是由前景控制。有几种方法可以解决这个问题。它可以在后面的代码中修改，也可以编辑您似乎熟悉的控件模板。

XAML 控制模板

模板

<phone:PhoneApplicationPage.Resources>
    <ControlTemplate x:Key="LongListSelectorControlTemplate1" TargetType="phone:LongListSelector">
        <Grid Background="{TemplateBinding Background}" d:DesignWidth="480" d:DesignHeight="800">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="ScrollStates">
                    <VisualStateGroup.Transitions>
                        <VisualTransition GeneratedDuration="00:00:00.5"/>
                    </VisualStateGroup.Transitions>
                    <VisualState x:Name="Scrolling">
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="VerticalScrollBar" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="NotScrolling"/>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>

            <Grid Margin="{TemplateBinding Padding}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="auto"/>
                </Grid.ColumnDefinitions>
                <ViewportControl
                    x:Name="ViewportControl"
                    VerticalAlignment="Top"
                    HorizontalContentAlignment="Stretch"
                            />
                <ScrollBar x:Name="VerticalScrollBar" Opacity="0" Margin="4,0,4,0" Orientation="Vertical" Grid.Column="1"/>
            </Grid>
        </Grid>
    </ControlTemplate>
</phone:PhoneApplicationPage.Resources>

用法

<phone:LongListSelector x:Name="llsMyList" Template="{StaticResource LongListSelectorControlTemplate1}" />

代码背后

扩大

public static class Extensions
{
    /// <summary>
    /// Finds the first element of a given type contained by this element.
    /// </summary>
    /// <typeparam name="TElement">The type of the <see cref="System.Windows.FrameworkElement"/> to locate.</typeparam>
    /// <param name="anElement">The parent element.</param>
    /// <returns>The first descendant <see cref="System.Windows.FrameworkElement"/> or null if not found.</returns>
    public static TElement FindFirstDescendant<TElement>(this FrameworkElement anElement) where TElement : FrameworkElement
    {
        var targetType = typeof(TElement);
        var queue = new Queue<FrameworkElement>();

        queue.Enqueue(anElement);

        while (queue.Count > 0)
        {
            var thisElement = queue.Dequeue();

            if (thisElement != anElement)
            {
                var elementType = thisElement.GetType();

                if (targetType == elementType || elementType.IsSubclassOf(targetType) || targetType.IsAssignableFrom(elementType))
                {
                    return thisElement as TElement;
                }
            }

            for (int i = 0; i < VisualTreeHelper.GetChildrenCount(thisElement as DependencyObject); i++)
            {
                var childElement = VisualTreeHelper.GetChild(thisElement as DependencyObject, i) as FrameworkElement;

                if (childElement != null)
                {
                    queue.Enqueue(childElement);
                }
            }
        }

        return null;
    }
}

用法

public partial class MyPhonePage : PhoneApplicationPage
{
    public MyPhonePage ()
    {
        llsMyList.Loaded += (sender, e) =>
        {
            var sb = llsMyList.FindFirstDescendant<System.Windows.Controls.Primitives.ScrollBar>();
            sb.Background = new System.Windows.Media.SolidColorBrush(System.Windows.Media.Colors.Green);
        }
    }
}