0

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;

    }

ご覧のとおり、ListPicker に 5 つ以上の項目がある場合、FullModeItemTemplate が優先されます (ただし、多くても 5 つのオプションに固執することになります)。ListPicker で選択されている色と一致するように、ListPickers の境界線と選択されたアイテムのアクセント カラーを変更するにはどうすればよいですか?

4

2 に答える 2

1

いくつかのことを行う必要があります。

  1. ColorandBrushプロパティをThemeクラスに追加します。
  2. のテンプレートをListPickerxaml に追加します
  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 プロパティを使用) ことが簡単になります。

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

<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}">
于 2013-11-11T22:35:46.893 に答える
0

コンバーターを使用して目的の結果を得ることができると思います

コンバータ用

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;
        }
    }
于 2013-11-11T11:27:21.753 に答える