具有多個數據模板的列表框-所選項目的樣式

Question

我有帶有2個數據模板的列表框，我還有一個用於列表框的ItemContainerStyle，它將突出顯示列表框中的選定項。

下面是我的代碼：

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

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

帶有Converter的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>

我在應用程序欄中有一個按鈕，單擊該按鈕時，我正在以編程方式設置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;
                }
            }
        }

    }

Answer 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. 另外，您應該在上述綁定中指定參數。

看下面的例子：

首先在您的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;
    }
}