带有多个数据模板的列表框-所选项目的样式 [英] 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>
带有Converter的数据模板:
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
.
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.
我该如何解决?
注意:我正在使用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
存在一些问题.
在以下代码中:
<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中:
In your 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>
在上面的代码中指定的转换器也应在此处使用.
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屋!