[英]How to change color of the selected ListView item [WP8.1]
I'm working on a C# project for Windows Phone 8.1, and I can't believe that I've already wasted almost a day looking for a solution to such a trivial problem: 我正在为Windows Phone 8.1开发一个C#项目,我无法相信我已经浪费了将近一天的时间来寻找这样一个小问题的解决方案:
I have a page defined with XAML, on that page I have a ListView. 我有一个用XAML定义的页面,在该页面上我有一个ListView。 At some point, I want one of the list view items to become selected, so I call myListView.SelectedIndex = whatever.
在某些时候,我希望其中一个列表视图项被选中,所以我调用myListView.SelectedIndex = what。 Now I want that item to be distinguished visually from other items, for example, have its text drawn with a different color.
现在我希望该项目在视觉上与其他项目区分开来,例如,使用不同的颜色绘制其文本。 How do I do that?
我怎么做? Here are the relevant parts of code:
以下是代码的相关部分:
<Page.Resources>
<DataTemplate x:Key="myListItemTemplate">
<TextBlock
Text="{Binding displayName}"
Style="{ThemeResource ListViewItemTextBlockStyle}"
/>
</DataTemplate>
</Page.Resources>
<ListView
x:Name="myListView"
ItemsSource="{Binding}"
ItemTemplate="{StaticResource myListItemTemplate}"
>
</ListView>
Is it possible with XAML alone? 是否可以单独使用XAML? Or can in be done in the C# code, just when I set myListView.SelectedIndex value?
或者可以在C#代码中完成,就在我设置myListView.SelectedIndex值时?
Thanks! 谢谢!
K, Andrei I think the solutions provided are quite good, it just buggy. K,Andrei我认为提供的解决方案非常好,它只是马车。 Here is mine.
这是我的。
XAML : Pay attention to the SelectedUnfocused XAML:注意SelectedUnfocused
<ListView x:Name="mylistview">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected">
<Storyboard>
<ColorAnimation Duration="0" Storyboard.TargetName="myback" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="Transparent"/>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedUnfocused">
<Storyboard>
<ColorAnimation Duration="0" Storyboard.TargetName="myback" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="Red"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="myback" Background="Transparent">
<ContentPresenter Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Height="100">
<TextBlock Text="{Binding Artist}" FontSize="22"/>
<TextBlock Text="{Binding Song}" FontSize="22"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
C# (A sample model) C#(样本模型)
public class sample_data
{
public sample_data(string artist, string song)
{
this.Artist = artist;
this.Song = song;
}
public string Artist { get; set; }
public string Song { get; set; }
}
private ObservableCollection<sample_data> CreateData()
{
//List<sample_data> my_list = new List<sample_data>();
ObservableCollection<sample_data> my_list = new ObservableCollection<sample_data>();
my_list.Add(new sample_data("Faith + 1", "Body of Christ"));
my_list.Add(new sample_data("Faith + 1", "Christ Again"));
my_list.Add(new sample_data("Faith + 1", "A Night With the Lord"));
my_list.Add(new sample_data("Faith + 1", "Touch Me Jesus"));
my_list.Add(new sample_data("Faith + 1", "I Found Jesus (With Someone Else)"));
my_list.Add(new sample_data("Faith + 1", "Savior Self"));
my_list.Add(new sample_data("Faith + 1", "Christ What a Day"));
my_list.Add(new sample_data("Faith + 1", "Three Times My Savior"));
my_list.Add(new sample_data("Faith + 1", "Jesus Touched Me"));
my_list.Add(new sample_data("Faith + 1", "Lord is my Savior"));
my_list.Add(new sample_data("Faith + 1", "I Wasn't Born Again Yesterday"));
my_list.Add(new sample_data("Faith + 1", "Pleasing Jesus"));
my_list.Add(new sample_data("Faith + 1", "Jesus (Looks Kinda Hot)"));
my_list.Add(new sample_data("Butters", "What What"));
return my_list;
}
private void Page_Loaded(object sender, RoutedEventArgs e)
{
ObservableCollection<sample_data> sd = this.CreateData();
mylistview.ItemsSource = sd;
}
Screenshot of it running: 它运行的屏幕截图:
You need to create a style for your ListBoxItem and use storyboards. 您需要为ListBoxItem创建样式并使用故事板。
Here is a sample : 这是一个示例:
<Page.Resources>
<Style x:Key="ListViewItemTemplate" TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<Border x:Name="LayoutRoot">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected">
<Storyboard>
<!-- Define style -->
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="container" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Selected">
<Storyboard>
<!-- Define style -->
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="container" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Margin="0,5" x:Name="container" Background="Transparent">
<!-- Definition of your list item. -->
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And the definition of the list view : 以及列表视图的定义:
<ListView ItemContainerStyle="{StaticResource ListViewItemTemplate}" SelectionMode="Single" />
Yes it is, you need to set a style with a trigger on the selected property. 是的,您需要在所选属性上设置带触发器的样式。 Its toughto yype in code on my phone but a quick google will show you a ton of examples or here: ListBox Style Selected item on windows phone
它在我的手机上的代码很难,但快速的谷歌将向你展示大量的例子或在这里: 列表框样式在Windows手机上选择项目
You can add to your class a boolean variable IsSelected, and convert it to a bg color. 您可以向类中添加一个布尔变量IsSelected,并将其转换为bg颜色。 For example:
例如:
<DataTemplate>
<Grid Background="{Binding IsSelected, Converter={StaticResource IsSelectedToBackgroundColorConverter}}">
<TextBlock Text="{Binding displayName}"
Style="{ThemeResource ListViewItemTextBlockStyle}" />
</Grid>
</DataTemplate>
| |
class IsSelectedToBackgroundColorConverter: IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
bool IsSelected = (bool)value;
if (IsSelected)
{
Windows.UI.Xaml.Media.Brush red = new SolidColorBrush(Windows.UI.Colors.Red);
return red;
}
else
{
Windows.UI.Xaml.Media.Brush transparent = new SolidColorBrush(Windows.UI.Colors.Transparent);
return transparent;
}
}
}
You just need to add the following to App.xaml 您只需将以下内容添加到App.xaml即可
</Application.Resources> <SolidColorBrush x:Key="ListViewItemSelectedBackgroundThemeBrush" Color="#92D050" /> <Application.Resources>
The "hex-Color" will be the selected item color in a ListView at application scope “hex-Color”将是应用程序范围内ListView中的选定项目颜色
Try this, Hope it may help you. 试试这个,希望它可以帮到你。
if (e.AddedItems != null) {
foreach (var item in e.AddedItems) {
ListViewItem litem = (sender as ListView).ContainerFromItem(item) as ListViewItem;
if (litem != null) {
VisualStateManager.GoToState(litem, "Unfocused", true);
VisualStateManager.GoToState(litem, "Normal", true);
VisualStateManager.GoToState(litem, "Selected", true);
}
}
}
if (e.RemovedItems != null) {
foreach (var item in e.RemovedItems) {
ListViewItem litem = (sender as ListView).ContainerFromItem(item) as ListViewItem;
if (litem != null) {
VisualStateManager.GoToState(litem, "Unselected", true);
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.