如何在视图中立即更改项目的颜色

时间：2013-11-12 04:35:05

标签： c# windows-phone-7 windows-phone-8

我有一个ListPicker，它有几个不同的颜色值选项。选择颜色值时，我想立即在视图中的某些项目上显示该颜色。我对如何最好地实现这一点感到有点困惑。

EditPage.xaml 

<phone:PhoneApplicationPage.Resources>
    <DataTemplate x:Name="ListPickerItemTemplate">
        <StackPanel Orientation="Horizontal">
            <Image Source="{Binding Image}" Width="50" Height="37.59"/>
            <TextBlock Text="{Binding Name}" Foreground="{Binding Brush}" 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}"/>

EditPage.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", Color = Color.FromArgb(255, 106, 0, 255) });
        themeList.Add(new Theme() { Image = new BitmapImage(new Uri("/Assets/Themes/Cyan.png", UriKind.Relative)), Name = "cyan", Color = Color.FromArgb(255, 27, 161, 226) });
        themeList.Add(new Theme() { Image = new BitmapImage(new Uri("/Assets/Themes/Cobalt.png", UriKind.Relative)), Name = "cobalt", Color = Color.FromArgb(255, 0, 80, 239) });

        themeListPicker.ItemsSource = themeList;
    }

private void themeListPicker_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        if (themeListPicker.SelectedItem == null)
            return;

        CurrentTheme = themeListPicker.SelectedItem as Theme;
    }

public class Theme : NotifyingObject
{
    public BitmapImage Image { get; set; }
    public string Name { get; set; }
    public Color Color { get; set; }
    public SolidColorBrush Brush
    {
        get
        {
            return new SolidColorBrush(Color);
        }
    }

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

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

我不确定我是否正确地将它们放在一起。另外，如何立即将当前选定的颜色显示为对象的颜色或视图中对象的某些属性？我有一些ToggleSwitches，一个滑块等，它们应该在ListPicker中选择一个新项目后立即改变颜色。

编辑**

EditPage.xaml 

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

..

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

<Slider x:Name="Slider"  Minimum="1" Maximum="6" Margin="12,20,12,0" Foreground="{Binding CurrentTheme.Brush}"
                    ValueChanged="Slider_ValueChanged" Value="1"/>

EditPage.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", Color = Color.FromArgb(255, 106, 0, 255) });
        themeList.Add(new Theme() { Image = new BitmapImage(new Uri("/Assets/Themes/Cyan.png", UriKind.Relative)), Name = "cyan", Color = Color.FromArgb(255, 27, 161, 226) });
        themeList.Add(new Theme() { Image = new BitmapImage(new Uri("/Assets/Themes/Cobalt.png", UriKind.Relative)), Name = "cobalt", Color = Color.FromArgb(255, 0, 80, 239) });

        var viewModel = new ThemeViewModel();
        viewModel.Themes = themeList;
        DataContext = viewModel;
    }

private void themeListPicker_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        //var theme = (sender as ListPicker);
        //MessageBox.Show("Chosen theme: " + e.AddedItems[0].ToString());

        if (themeListPicker.SelectedItem == null)
            return;

        //How to save the current theme color in IsoStore?
        var CurrentTheme = themeListPicker.SelectedItem as Theme;
        //Custom Settings class to save current color in IsoStore
        Settings.themeBrush.Value = CurrentTheme.Brush;
    }

ThemeViewModel.cs 

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

    private IList<Theme> _themes;
    public IList<Theme> Themes
    {
        get { return _themes; }
        set
        {
            if (value == _themes) return;
            _themes = value;
            NotifyPropertyChanged("Themes");
        }
    }

Theme.cs 

public BitmapImage Image { get; set; }
    public string Name { get; set; }
    public Color Color { get; set; }
    public SolidColorBrush Brush
    {
        get
        {
            return new SolidColorBrush(Color);
        }
    }

Settings.cs 

//Theme
    public static readonly Setting<SolidColorBrush> themeBrush = new Setting<SolidColorBrush>("themeBrush", new SolidColorBrush(Color.FromArgb(255, 106, 0, 255)));

在CurrentTheme这样的绑定中使用这个新的编辑和设置Foreground="{Binding CurrentTheme.Brush}"，就像ListPicker中的项目不可见，但是当我从绑定中移除CurrentTheme时，例如{ {1}} ListPicker项目是否显示其相关颜色？沿着这些方向，在Foreground="{Binding Brush}"控件的前景绑定中使用或不使用CurrentTheme都有效，因此前景似乎只是透明的。另外，当进行新的ListPicker选择时，如何以这种方式更改ListPicker的边框？此外，我需要保存当前的主题颜色，以便视图中的项目在返回应用程序时具有相同的颜色。在ListPicker中选择新项目后，将项目指定为永久颜色的最佳方法是什么？我上面显示了一个Slider类，它可以将刷子值存储在IsoStore中，但是如何将它应用到您的解决方案后面的View中的项目（通常我会在显式后面的代码中执行此操作）？

0 个答案:

没有答案
相关问题
最新问题