Как изменить шаблон выбора ListPicker

Я заметил, что по умолчанию в ListPicker граница и текущий текст выбранного элемента автоматически становятся цветом акцента телефона. Мне было интересно, как можно было бы жестко закодировать эти значения для другого цвета (который будет выбран в самом ListPicker). Например, моя тема телефона — лайм, но я хотел бы вручную установить границу и цвет выделенного текста на кобальт, когда выбран элемент кобальта. То же самое для голубого, красного и так далее. Мой ListPicker выглядит так

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;

    }

Как вы можете видеть, у меня может быть более 5 элементов в моем ListPicker, в котором FullModeItemTemplate будет иметь приоритет (хотя я, вероятно, буду придерживаться не более 5 вариантов). Как изменить границу ListPickers и цвета выделения выбранного элемента, чтобы они соответствовали цвету, выбранному в ListPicker?


c# xaml listpicker windows-phone-7 windows-phone-8
person Matthew    schedule 11.11.2013    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вам нужно будет сделать пару вещей:

  1. Добавьте свойство Color и Brush в свой класс Theme.
  2. Добавьте шаблон для вашего ListPicker в ваш xaml
  3. Добавьте свойство CurrentTheme в свой файл xaml.cs.
  4. Привязать CurrentTheme к границе ListPicker

Ваш класс Theme будет выглядеть примерно так

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).

Ваша страница.xaml.cs

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

Ваша страница.xaml

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

Если вы хотите привязать выбранную тему к границе ListPicker, вам нужно будет добавить шаблон для ListPicker. Самый простой способ сделать это — использовать Expression Blend. Если вы это сделали, вы можете привязать цвет границы следующим образом:

Добавьте текущую тему в 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;
}

Привяжите кисть к границе в шаблоне выбора списка:

<!-- Omitted rest of template for brevity -->
<Border 
    x:Name="Border"
    Background="{TemplateBinding Background}"
    BorderThickness="{TemplateBinding BorderThickness}" 
    BorderBrush="{Binding CurrentTheme.Brush}">
person venerik    schedule 11.11.2013
comment
Не могли бы вы объяснить, как вы заставили шаблон ListPicker менять кисть? Я помню, как раньше делал это в Visual Studio, но не могу повторить свои шаги. - person Matthew; 16.11.2013
comment
Щелкните правой кнопкой мыши файл page.xaml в обозревателе решений. Выберите Open in Blend... В Blend щелкните правой кнопкой мыши ListPicker. Выберите Edit template|Edit a Copy.... Выберите имя для шаблона и нажмите «ОК». В средстве просмотра объектов и временной шкалы выберите элемент Border. Теперь вы можете установить BorderBrush на все, что вам нравится. - person venerik; 18.11.2013

arrow_upward
0
arrow_downward

думаю, вы можете использовать конвертер, чтобы получить желаемый результат

для преобразователя

public class SelectedItemColorConverter:IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {


            if ((bool)value)
            {
                return new SolidColorBrush((Colors.Red);
            }
            return new SolidColorBrush(Colors.White);
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {

           return null;
        }
    }
person techloverr    schedule 11.11.2013