如何动态更新列表视图项目的颜色和字体?
How to update listview item color and font dynamically?
我想动态更新我的列表视图,我会解释一下情况:我有一个 MainPage,我在 xaml:
中声明了它
<controls:DockPanel Width="100" Height="100">
<Grid>
<ListView x:Name="myList" Width="100" Margin="10,0,0,'" ItemsSource="{Binding Path=Item}">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Margin" Value="0,0,0,0" />
<Setter Property="Padding" Value="0,0,0,-6" />
<Setter Property="MinHeight" Value="20" />
</Style>
</ListView.ItemContainerStyle>
</ListView>
</Grid>
</controls:DockPanel>
我关联了一个视图模型
namespace My_app.ViewModels
{
public class MainPageViewModel : ViewModel
{
private ObservableCollection<string> _items;
private string _sItems;
public MainPageViewModel()
{
_items = new ObservableCollection<string>();
}
public ObservableCollection<string> Items
{
get { return _items; }
set
{
_items = value;
OnPropertyChanged("Items");
}
}
}
所以我有一个显示在主页上的组件,它有一个按钮,我可以在其中添加一个列表,我想动态更改此列表视图的颜色和字体
private ViewModels.MainPageViewModel _viewModels;
private void Button_Click(object sender, RoutedEventArgs e)
{
List<string> myList = new List<string>(somevalue);
foreach (var x in myList)
{
view_.Pins.Add(x);
}
//after I want to dynamically change color and font of my items
}
然后我想做的是列出列表视图的元素并动态改变它们的颜色,例如:
for (int i = 0; i < myList.Items.Count; i++)
{
//getItem(i)
//change item color
//change item font
}
您可以使用 ValueConverter 和数据绑定来实现您想要的。
步骤如下:
- 根据您的要求创建一个 ValueConverter。您需要根据值字符串设置背景颜色和字体颜色。所以你需要有一个参数来指示何时设置背景颜色和字体颜色。
- 您需要为 ListView 项创建一个数据模板,以便该项可以使用数据绑定。
值转换器的代码:
public class ColorConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
SolidColorBrush brush = null;
// Retrieve the parameter string and data string.
string formatString = parameter as string;
string data = value as string;
// retrun different brush based on the parameter and data string
if (formatString.Equals("foreground"))
{
switch (data)
{
case "1":
brush = new SolidColorBrush(Colors.Red);
break;
case "2":
brush = new SolidColorBrush(Colors.Green);
break;
}
}
else if (formatString.Equals("background"))
{
switch (data)
{
case "1":
brush = new SolidColorBrush(Colors.AliceBlue);
break;
case "2":
brush = new SolidColorBrush(Colors.Yellow);
break;
}
}
return brush;
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
return null;
}
}
Xaml中的代码:
<ListView x:Name="myList" Width="100" Margin="10,0,0,0" ItemsSource="{Binding Path=Items}">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Margin" Value="0,0,0,0" />
<Setter Property="Padding" Value="0,0,0,-6" />
<Setter Property="MinHeight" Value="20" />
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate >
<Grid Width="200" Height="50" Background="{Binding Mode=TwoWay, Converter={StaticResource ColorConverter},ConverterParameter=background}">
<TextBlock Text="{Binding Mode=TwoWay}" Foreground="{Binding Mode=TwoWay,Converter={StaticResource ColorConverter},ConverterParameter=foreground}"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
看起来如何:
这是一个简单的实现。您可以根据自己的场景更改数据模板和ValeConverter的逻辑。
我想动态更新我的列表视图,我会解释一下情况:我有一个 MainPage,我在 xaml:
中声明了它<controls:DockPanel Width="100" Height="100">
<Grid>
<ListView x:Name="myList" Width="100" Margin="10,0,0,'" ItemsSource="{Binding Path=Item}">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Margin" Value="0,0,0,0" />
<Setter Property="Padding" Value="0,0,0,-6" />
<Setter Property="MinHeight" Value="20" />
</Style>
</ListView.ItemContainerStyle>
</ListView>
</Grid>
</controls:DockPanel>
我关联了一个视图模型
namespace My_app.ViewModels
{
public class MainPageViewModel : ViewModel
{
private ObservableCollection<string> _items;
private string _sItems;
public MainPageViewModel()
{
_items = new ObservableCollection<string>();
}
public ObservableCollection<string> Items
{
get { return _items; }
set
{
_items = value;
OnPropertyChanged("Items");
}
}
}
所以我有一个显示在主页上的组件,它有一个按钮,我可以在其中添加一个列表,我想动态更改此列表视图的颜色和字体
private ViewModels.MainPageViewModel _viewModels;
private void Button_Click(object sender, RoutedEventArgs e)
{
List<string> myList = new List<string>(somevalue);
foreach (var x in myList)
{
view_.Pins.Add(x);
}
//after I want to dynamically change color and font of my items
}
然后我想做的是列出列表视图的元素并动态改变它们的颜色,例如:
for (int i = 0; i < myList.Items.Count; i++)
{
//getItem(i)
//change item color
//change item font
}
您可以使用 ValueConverter 和数据绑定来实现您想要的。
步骤如下:
- 根据您的要求创建一个 ValueConverter。您需要根据值字符串设置背景颜色和字体颜色。所以你需要有一个参数来指示何时设置背景颜色和字体颜色。
- 您需要为 ListView 项创建一个数据模板,以便该项可以使用数据绑定。
值转换器的代码:
public class ColorConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
SolidColorBrush brush = null;
// Retrieve the parameter string and data string.
string formatString = parameter as string;
string data = value as string;
// retrun different brush based on the parameter and data string
if (formatString.Equals("foreground"))
{
switch (data)
{
case "1":
brush = new SolidColorBrush(Colors.Red);
break;
case "2":
brush = new SolidColorBrush(Colors.Green);
break;
}
}
else if (formatString.Equals("background"))
{
switch (data)
{
case "1":
brush = new SolidColorBrush(Colors.AliceBlue);
break;
case "2":
brush = new SolidColorBrush(Colors.Yellow);
break;
}
}
return brush;
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
return null;
}
}
Xaml中的代码:
<ListView x:Name="myList" Width="100" Margin="10,0,0,0" ItemsSource="{Binding Path=Items}">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Margin" Value="0,0,0,0" />
<Setter Property="Padding" Value="0,0,0,-6" />
<Setter Property="MinHeight" Value="20" />
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate >
<Grid Width="200" Height="50" Background="{Binding Mode=TwoWay, Converter={StaticResource ColorConverter},ConverterParameter=background}">
<TextBlock Text="{Binding Mode=TwoWay}" Foreground="{Binding Mode=TwoWay,Converter={StaticResource ColorConverter},ConverterParameter=foreground}"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
看起来如何:
这是一个简单的实现。您可以根据自己的场景更改数据模板和ValeConverter的逻辑。