具有多个数据模板的列表框 - 所选项目的样式 [英] List box with multiple data template - style for selected item
问题描述
我有带有 2 个数据模板的列表框，我还有一个用于列表框的 ItemContainerStyle，它将突出显示列表框中的选定项目.
I have List Box with 2 data template, i have a ItemContainerStyle for list box as well which will highlight the selected item in the list box.
下面是我的代码:
<DataTemplate x:Key="DefaultDataTemplate">
<Border
Margin="0,2,0,0"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch">
<Grid> items ...</Grid>
</Border>
</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，它将在列表框中将 2 个项目颜色更改为绿色.
I have a button in the application bar on click on that button i am programatically setting the NewDataTemplate which will change 2 item colors to green in the list box.
列表框项目选择器样式:
List box item selector style:
<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>
这将在我们选择项目时应用样式.
This will apply the style when we select the item.
现在，当我单击列表框中的项目时，这种样式在我的 DefaultDataTemplate 上效果很好，这意味着该项目会突出显示，但是当设置了 NewDataTemplate 时，该样式根本不显示.
Now this style works good on my DefaultDataTemplate when i click on the item in the list box that means the item gets highlighted, but when the NewDataTemplate is set the style is not showing at all.
我该如何解决这个问题?
How can i fix this ?
注意:我正在开发 Windows Phone 8 应用程序.
Note : I am working on Windows Phone 8 application.
编辑 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 类:
This is my MyObject class:
public class MyObject
{
private byte isCorrect;
public byte IsCorrect
{
get { return isCorrect; }
set
{
if (value != this.isCorrect)
{
isCorrect = value;
}
}
}
}
推荐答案
您的第二个 DataTemplate 有几个问题.
There are couple of issue with your 2nd 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}}"
- 您没有提供任何路径.因此，您的转换器将不会获得任何输入值.
- 此外，您应该在上述绑定中指定参数.
看看下面的例子:
首先在您的 ViewModel 中声明如下属性:
First in your ViewModel declare a property like below :
private MyObject myBackground;
public MyObject MyBackground
{
get
{
return myBackground;
}
set
{
myBackground = value;
NotifyPropertyChanged("MyBackground");
}
}
在更改 DataTemplate 或 ViewModel 的构造函数之前填充 MyBackground 中的值.
Fill the values in MyBackground before changing the DataTemplate or in the Constructor of your ViewModel.
在您的数据模板中:
<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>
您在上面代码中指定的转换器也应在此处使用.
The converter you specified in above code should be used here as well.
注意: 以上示例代码未经测试.如果有任何错误，请尝试解决.如果您有任何问题，请随时提出.
Note: The above example code is not tested. If there are any errors, then please try to solve it. And if you have any problems please feel free to ask.
更新:
您无需对 Answer 类进行任何更改.
You don't need to make any changes to your Answer Class.
在您的 ViewModel 中，只需声明如下属性:
In your ViewModel just declare a property like below:
private Answer myBackground;
public Answer MyBackground
{
get
{
return myBackground;
}
set
{
myBackground = value;
OnPropertyChanged("MyBackground");
}
}
使用我之前在回答中提到的 XAML.
Use the XAML that I mentioned previously in my Answer.
像下面的代码一样对转换器进行更改:
Make changes to your converter like below code:
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;
}
}
这篇关于具有多个数据模板的列表框 - 所选项目的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
