如何在 Windows Phone 8 中选择列表框项时更改椭圆的笔划
本文关键字:Windows Phone 列表 选择 | 更新日期: 2023-09-27 18:34:08
我目前正在Windows Phone 8上工作,我创建了一个包含Ellipse的ListBox来显示图像。现在,我想在用户选择列表框中的任何项目时更改它的笔触颜色。我的列表框 XAML 代码及其数据模板如下所示
<ListBox x:Name="OwnerList"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
ItemsPanel="{StaticResource FileItemsPanel}"
ItemTemplate="{StaticResource OwnerListTemplate}"
SelectionMode="Multiple"
SelectionChanged="OwnerList_SelectionChanged"/>
数据模板
<DataTemplate x:Key="OwnerListTemplate">
<StackPanel Margin="20,0,20,0">
<Ellipse Height="120"
Width="120"
Margin="4"
Stroke="Blue"
StrokeThickness="2">
<Ellipse.Fill>
<ImageBrush ImageSource="{Binding PHOTO, Converter={StaticResource Imageconverter}}"/>
</Ellipse.Fill>
</Ellipse>
<TextBlock x:Name="OwnerName"
Text="{Binding NAME}"
FontSize="22"
Foreground="Gray"
FontWeight="Bold"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
<TextBlock x:Name="distance"
Text="{Binding DISTANCE}"
FontSize="20"
Foreground="Gray"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</StackPanel>
</DataTemplate>
<ItemsPanelTemplate x:Key="FileItemsPanel">
<StackPanel Orientation="Horizontal">
<StackPanel.RenderTransform>
<TranslateTransform X="0" />
</StackPanel.RenderTransform>
</StackPanel>
</ItemsPanelTemplate>
我知道如何更改整个列表项的前景,但不知道如何更改椭圆描边颜色。为了更改列表框的前景色,我实现了以下代码
<Style x:Key="DynamicDataGenericListViewContainerStyle"
TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment"
Value="Stretch" />
<Setter Property="Margin"
Value="0,0,0,1"/>
<Setter Property="Padding"
Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border x:Name="LayoutRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0" To=".5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentContainer"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot"
Storyboard.TargetProperty="BorderThickness">
<DiscreteObjectKeyFrame KeyTime="0" Value="0,0,0,2" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot"
Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource DynamicDataColor}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource DynamicDataColor}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
您可以将INotifyPropertyChanged
实现到模型中并添加
public class Model : INotifyPropertyChanged
{
private bool _isSelected;
public string PHOTO { get; set; }
public string NAME { get; set; }
public string DISTANCE { get; set; }
public bool IsSelected
{
get
{
return _isSelected;
}
set
{
if (value != _isSelected)
{
_isSelected = value;
RaisePropertyChanged();
}
}
}
public event PropertyChangedEventHandler PropertyChanged;
private void RaisePropertyChanged([CallerMemberName] string propertyName = null)
{
var propertyChanged = Volatile.Read(ref PropertyChanged);
if (propertyChanged != null)
{
propertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}
因此,在OwnerList_SelectionChanged
您应该更改此属性
private void OwnerList_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (e.AddedItems != null && e.AddedItems.Count > 0)
{
var addedItem = e.AddedItems.Cast<Model>().ToList();
foreach(var item in addedItem)
{
item.IsSelected = true;
}
}
if (e.RemovedItems != null && e.RemovedItems.Count > 0)
{
var removedItems = e.RemovedItems.Cast<Model>().ToList();
foreach (var item in removedItems)
{
item.IsSelected = false;
}
}
}
为Stroke
创建简单的转换器
public class EllipseStrokeConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
var result = new SolidColorBrush(Colors.Blue);
if ((bool)value)
{
result = new SolidColorBrush(Colors.Red);
}
return result;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
并在模板中使用它
<local:EllipseStrokeConverter x:Key="EllipseStrokeConverter"/>
<DataTemplate x:Key="OwnerListTemplate">
<StackPanel Margin="20,0,20,0">
<Ellipse Height="120"
Width="120"
Margin="4"
Stroke="{Binding IsSelected, Converter={StaticResource EllipseStrokeConverter}}"
StrokeThickness="2">
<Ellipse.Fill>
<ImageBrush ImageSource="{Binding PHOTO, Converter={StaticResource Imageconverter}}"/>
</Ellipse.Fill>
</Ellipse>
<TextBlock x:Name="OwnerName"
Text="{Binding NAME}"
FontSize="22"
Foreground="Gray"
FontWeight="Bold"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
<TextBlock x:Name="distance"
Text="{Binding DISTANCE}"
FontSize="20"
Foreground="Gray"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</StackPanel>
</DataTemplate>
更新
我知道另一种无需C#
操纵的解决方案。在我们的ListBoxItem
中,我们从ContentControl
中选择一些属性,这些属性将在DataTemplate
中描述我们的属性的逻辑,并通过Binding
使用此属性值。
<Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border x:Name="LayoutRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0" To=".5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentContainer"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentContainer"
Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="Yellow"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentControl x:Name="ContentContainer"
BorderBrush="Blue"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
Foreground="{TemplateBinding Foreground}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
查看Selected
视觉状态名称,我们在其中更改BorderBrush
以这种方式在DataTemplate
中使用的属性值
Stroke="{Binding BorderBrush, ElementName=ContentContainer}"