如何更改ListPicker选择模板 [英] How to Change ListPicker Selection Template

问题描述

我注意到默认情况下，在ListPicker中，边框和当前选定项目的文本自动为电话的强调色.我想知道如何将这些值硬编码为另一种颜色(可以在ListPicker本身中选择).例如，我的手机主题是石灰，但我想选择钴项目时的边界，并强调文字颜色设置为手动钴.对于青色，红色等相同.我的ListPicker看起来像这样

I've noticed that by default in a ListPicker the border and currently selected item's text automatically are the phone's accent color. I was wondering how it would be possible to hard code these values to another color (which would be selected within the ListPicker itself). For instance, my phone theme is lime but I would like to manually set the border and highlighted text color to cobalt when the cobalt item is selected. Same for cyan, red, and so forth. My ListPicker looks like this

XAML

<phone:PhoneApplicationPage.Resources>
    <DataTemplate x:Name="ListPickerItemTemplate">
        <StackPanel Orientation="Horizontal">
            <Image Source="{Binding Image}" Width="50" Height="37.59"/>
            <TextBlock Text="{Binding Name}" Margin="12,0,0,0" TextWrapping="Wrap"/>
        </StackPanel>
    </DataTemplate>
    <DataTemplate x:Name="ListPickerFullModeItemTemplate">
        <StackPanel Orientation="Horizontal">
            <Image Source="{Binding Image}" Width="50" Height="37.59"/>
            <TextBlock Text="{Binding Name}" Margin="12,0,0,0" TextWrapping="Wrap"/>
        </StackPanel>
    </DataTemplate>
</phone:PhoneApplicationPage.Resources>

...

<toolkit:ListPicker x:Name="themeListPicker" Header="Theme" FullModeHeader="Theme" CacheMode="BitmapCache"
                                        SelectionChanged="themeListPicker_SelectionChanged"
                                        ItemTemplate="{StaticResource ListPickerItemTemplate}" 
                                        FullModeItemTemplate="{StaticResource ListPickerFullModeItemTemplate}"/>

XAML.CS

protected override void OnNavigatedTo(NavigationEventArgs e)
    {
        base.OnNavigatedTo(e);

        themeList = new List<Theme>();
        themeList.Add(new Theme() { Image = new BitmapImage(new Uri("/Assets/Themes/Indigo.png", UriKind.Relative)), Name = "indigo" });
        //themeList.Add(new Theme() { Image = new BitmapImage(new Uri("/Assets/Themes/Lime.png", UriKind.Relative)), Name = "lime" });
        //themeList.Add(new Theme() { Image = new BitmapImage(new Uri("/Assets/Themes/Green.png", UriKind.Relative)), Name = "green" });
        //themeList.Add(new Theme() { Image = new BitmapImage(new Uri("/Assets/Themes/Emerald.png", UriKind.Relative)), Name = "emerald" });
        //themeList.Add(new Theme() { Image = new BitmapImage(new Uri("/Assets/Themes/Teal.png", UriKind.Relative)), Name = "teal" });
        themeList.Add(new Theme() { Image = new BitmapImage(new Uri("/Assets/Themes/Cyan.png", UriKind.Relative)), Name = "cyan" });
        themeList.Add(new Theme() { Image = new BitmapImage(new Uri("/Assets/Themes/Cobalt.png", UriKind.Relative)), Name = "cobalt" });
        //themeList.Add(new Theme() { Image = new BitmapImage(new Uri("/Assets/Themes/Violet.png", UriKind.Relative)), Name = "violet" });
        //themeList.Add(new Theme() { Image = new BitmapImage(new Uri("/Assets/Themes/Pink.png", UriKind.Relative)), Name = "pink" });
        //themeList.Add(new Theme() { Image = new BitmapImage(new Uri("/Assets/Themes/Magenta.png", UriKind.Relative)), Name = "magenta" });
        //themeList.Add(new Theme() { Image = new BitmapImage(new Uri("/Assets/Themes/Crimson.png", UriKind.Relative)), Name = "crimson" });
        themeList.Add(new Theme() { Image = new BitmapImage(new Uri("/Assets/Themes/Red.png", UriKind.Relative)), Name = "red" });
        //themeList.Add(new Theme() { Image = new BitmapImage(new Uri("/Assets/Themes/Orange.png", UriKind.Relative)), Name = "orange" });
        //themeList.Add(new Theme() { Image = new BitmapImage(new Uri("/Assets/Themes/Amber.png", UriKind.Relative)), Name = "amber" });
        //themeList.Add(new Theme() { Image = new BitmapImage(new Uri("/Assets/Themes/Yellow.png", UriKind.Relative)), Name = "yellow" });
        //themeList.Add(new Theme() { Image = new BitmapImage(new Uri("/Assets/Themes/Brown.png", UriKind.Relative)), Name = "brown" });
        //themeList.Add(new Theme() { Image = new BitmapImage(new Uri("/Assets/Themes/Olive.png", UriKind.Relative)), Name = "olive" });
        themeList.Add(new Theme() { Image = new BitmapImage(new Uri("/Assets/Themes/Steel.png", UriKind.Relative)), Name = "steel" });
        //themeList.Add(new Theme() { Image = new BitmapImage(new Uri("/Assets/Themes/Mauve.png", UriKind.Relative)), Name = "mauve" });
        //themeList.Add(new Theme() { Image = new BitmapImage(new Uri("/Assets/Themes/Sienna.png", UriKind.Relative)), Name = "sienna" });

        themeListPicker.ItemsSource = themeList;

    }

如您所见，我的ListPicker中可能有5个以上的项目，其中FullModeItemTemplate优先(尽管我最多只能坚持5个选项).如何更改ListPickers边框和所选项目的强调色以匹配ListPicker中选择的颜色?

As you can see I may have more than 5 items in my ListPicker, in which the FullModeItemTemplate would take precedence (although I will probably stick to just 5 options at the most). How might I change the ListPickers border and selected item accent colors to match the color that is selected in the ListPicker?

推荐答案

您必须做几件事:

1. 在Theme类中添加Color和Brush属性.
2. 将ListPicker的模板添加到xaml
3. 在您的xaml.cs中添加CurrentTheme属性
4. 将CurrentTheme绑定到ListPicker的边框

1. Add a Color and Brush property to your Theme class.
2. Add a template for your ListPicker to your xaml
3. Add a CurrentTheme property to your xaml.cs
4. Bind CurrentTheme to border of ListPicker

您的主题类将类似于

public class Theme
{
    public string Name { get; set; }
    public BitmapImage Image { get; set; }
    public Color Color { get; set; }

    public SolidColorBrush Brush
    {
        get
        {
            return new SolidColorBrush(Color);
        }
    }
}

这可以轻松地将彩色主题添加到列表中(使用Color属性)并将该颜色绑定到文本和边框(使用Brush属性).

This makes it easy to add colored themes to your list (using the Color property) and binding that color to your text and border (using the Brush property).

YourPage.xaml.cs

YourPage.xaml.cs

themeList.Add(new Theme
{ 
    Image = new BitmapImage(new Uri("/Assets/Themes/Indigo.png", UriKind.Relative)),
    Name = "cyan",
    Color = Colors.Cyan 
});

YourPage.xaml

YourPage.xaml

<TextBlock 
    Text="{Binding Name}" 
    Foreground="{Binding Brush}"
    Margin="12,0,0,0" 
    TextWrapping="Wrap"/>

如果要将选定的主题绑定到ListPicker的边框，则需要为ListPicker添加模板.最简单的方法是使用Expression Blend.如果这样做，则可以像这样绑定边框的颜色:

If you want to bind the selected theme to the border of the ListPicker you will need to add a template for the ListPicker. The easiest way to do that is to use Expression Blend. If you have done that you can bind the color of the border like so:

将当前主题添加到YourPage.xaml:

Add current theme to YourPage.xaml:

private Theme _currentTheme;
public Theme CurrentTheme
{
    get
    {
        return _currentTheme;
    }

    private set
    {
        if (value == _currentTheme) return;
        _currentTheme = value;
        NotifyPropertyChanged("CurrentTheme");
    }
}

private void ThemesListPicker_OnSelectionChanged(object sender, SelectionChangedEventArgs e)
{
    if (ThemesListPicker.SelectedItem == null) return;
    CurrentTheme = ThemesListPicker.SelectedItem as Theme;
}

将画笔绑定到列表选择器模板中的边框:

Bind the brush to the border in the list picker template:

<!-- Omitted rest of template for brevity -->
<Border 
    x:Name="Border"
    Background="{TemplateBinding Background}"
    BorderThickness="{TemplateBinding BorderThickness}" 
    BorderBrush="{Binding CurrentTheme.Brush}">

这篇关于如何更改ListPicker选择模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！