具有多个数据模板的列表框 - 所选项目的样式

时间:2014-03-22 13:19:07

标签: c# wpf silverlight listbox windows-phone

我有2个数据模板的列表框,我有一个列表框的ItemContainerStyle,它将突出显示列表框中的选定项目。

以下是我的代码:

<DataTemplate x:Key="DefaultDataTemplate">
            <Border  

                    Margin="0,2,0,0" 
                    VerticalAlignment="Stretch"
                    HorizontalAlignment="Stretch">
                <Grid> items ...</Grid>
           </Border>
</DataTemplate>

Datatemplate with Convertor:

<DataTemplate x:Key="NewDataTemplate">
            <Border  
                    Background="{Binding Converter={StaticResource BackgroundConvertor}}"
                    Margin="0,2,0,0" 
                    VerticalAlignment="Stretch"
                    HorizontalAlignment="Stretch">
                <Grid> items ...</Grid>
           </Border>
</DataTemplate>

我在应用程序栏中有一个按钮,点击该按钮,我以编程方式设置NewDataTemplate which will change 2 item colors to green in the list box

列表框项目选择器样式:

<Style x:Key="ListItemSelectorStyle" TargetType="ListBoxItem">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="Padding" Value="0" />
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property ="Foreground" Value="Black" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <Border x:Name="ListBoxItem" Background="{TemplateBinding Background}" 
                                    HorizontalAlignment="{TemplateBinding HorizontalAlignment}" 
                                    VerticalAlignment="{TemplateBinding VerticalAlignment}" 
                                    BorderBrush="{TemplateBinding BorderBrush}" 
                                    BorderThickness="{TemplateBinding BorderThickness}">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ListItemBorder" Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="#c9ebf2" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled"/>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="SelectionStates">
                                    <VisualState x:Name="Unselected"/>
                                    <VisualState x:Name="Selected">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ListItemBorder" Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="#c9ebf2" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border x:Name="ListItemBorder" 
                                    BorderBrush="Transparent" Background="#e3e8f0">
                                <ContentControl x:Name="ContentContainer" 
                                                ContentTemplate="{TemplateBinding ContentTemplate}" 
                                                Content="{TemplateBinding Content}" 
                                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                                Margin="{TemplateBinding Padding}" 
                                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </Border>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

这将在我们选择项目时应用样式。

现在,当我点击列表框中的项目表示项目被突出显示时,此样式在我的DefaultDataTemplate上运行良好,但是当设置NewDataTemplate时,样式根本不显示。

我该如何解决这个问题?

注意:我正在使用Windows Phone 8应用程序。

编辑1

public class BackgroundConvertor: IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            SolidColorBrush solidColorBrush = null;

            if (value != null)
            {
                MyObject obj = value as MyObject ;
                if (parameter != null)
                {
                    if (obj.IsCorrect == 1 && parameter.ToString() == "0")
                    {
                        solidColorBrush = new SolidColorBrush(Color.FromArgb((byte)255, (byte)201, (byte)235, (byte)242)); //blue color                                                       
                    }
                    else if (obj.IsCorrect == 1 && parameter.ToString() == "1")  
                    {
                        solidColorBrush = new SolidColorBrush(Color.FromArgb((byte)255, (byte)201, (byte)242, (byte)169));//green color                                                        
                    }
                    else
                    {
                        solidColorBrush = new SolidColorBrush(Color.FromArgb((byte)255, (byte)227, (byte)232, (byte)240));//Grey color.
                    }
                }
                else if (obj.IsCorrect == 1)
                {
                    solidColorBrush = new SolidColorBrush(Color.FromArgb((byte)255, (byte)201, (byte)242, (byte)169));//green color  
                }

                else
                {
                    solidColorBrush = new SolidColorBrush(Color.FromArgb((byte)255, (byte)227, (byte)232, (byte)240));//Grey color.
                }
            }
            return solidColorBrush;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return null;
        }
    }

编辑2

这是我的MyObject类:

public class MyObject 
    {
private byte isCorrect;
        public byte IsCorrect
        {
            get { return isCorrect; }
            set
            {
                if (value != this.isCorrect)
                {
                    isCorrect = value;
                }
            }
        }

    }

1 个答案:

答案 0 :(得分:1)

您的第二个DataTemplate存在几个问题。

在下面的代码中:

<DataTemplate x:Key="NewDataTemplate">
    <Border  
            Background="{Binding Converter={StaticResource BackgroundConvertor}}"
            Margin="0,2,0,0" 
            VerticalAlignment="Stretch"
            HorizontalAlignment="Stretch">
        <Grid> items ...</Grid>
   </Border>
</DataTemplate>

在上面的代码中看看:

Background="{Binding Converter={StaticResource BackgroundConvertor}}"

  1. 您没有提供任何路径。因此,您的转换器将无法获得任何输入值。
  2. 另外,您应该在上面的绑定中指定参数。
  3. 请看下面的示例:

    首先在ViewModel中声明如下属性:

    private MyObject myBackground;
    public MyObject MyBackground
    {
        get
        {
            return myBackground;
        }
        set
        {
            myBackground = value;
            NotifyPropertyChanged("MyBackground");
        }
    }
    

    在更改DataTemplate之前或在ViewModel的构造函数中填充MyBackground中的值。

    在您的DataTemplate中:

    <DataTemplate x:Key="NewDataTemplate">
        <Border  
                Background="{Binding Path=MyBackground, Converter={StaticResource BackgroundConvertor} 
                                     ConverterParameter='1'}" />
                Margin="0,2,0,0" 
                VerticalAlignment="Stretch"
                HorizontalAlignment="Stretch">
            <Grid> items ...</Grid>
       </Border>
    </DataTemplate>
    

    此处也应使用您在上述代码中指定的转换器。

    注意:以上示例代码未经过测试。如果有任何错误,请尝试解决。如果您有任何问题,请随时提出。

    <强>更新

    您无需对Answer班级进行任何更改。

    在您的ViewModel中,只需声明如下属性:

    private Answer myBackground;
    public Answer MyBackground
    {
        get
        {
            return myBackground;
        }
        set
        {
            myBackground = value;
            OnPropertyChanged("MyBackground");
        }
    }
    

    使用我之前在答案中提到的XAML。

    更改您的转换器,如下面的代码:

    public class BackgroundConvertor: IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            SolidColorBrush solidColorBrush = null;
    
            if (value != null)
            {
                Answer answer = (Answer)value ;
                if (parameter != null)
                {
                    if (answer.IsCorrect == 1 && parameter.ToString() == "0")
                    {
                        solidColorBrush = new SolidColorBrush(Color.FromArgb((byte)255, (byte)201, (byte)235, (byte)242)); //blue color                                                       
                    }
                    else if (answer.IsCorrect == 1 && parameter.ToString() == "1")  
                    {
                        solidColorBrush = new SolidColorBrush(Color.FromArgb((byte)255, (byte)201, (byte)242, (byte)169));//green color                                                        
                    }
                    else
                    {
                        solidColorBrush = new SolidColorBrush(Color.FromArgb((byte)255, (byte)227, (byte)232, (byte)240));//Grey color.
                    }
                }
                else if (answer.IsCorrect == 1)
                {
                    solidColorBrush = new SolidColorBrush(Color.FromArgb((byte)255, (byte)201, (byte)242, (byte)169));//green color  
                }
    
                else
                {
                    solidColorBrush = new SolidColorBrush(Color.FromArgb((byte)255, (byte)227, (byte)232, (byte)240));//Grey color.
                }
            }
            return solidColorBrush;
        }
    
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return null;
        }
    }