Windows Phone 8中选中ListBox项时如何更改椭圆的笔画？
How to change stroke of Ellipse when ListBox item is selected in Windows Phone 8?
我目前正在研究 windows phone 8，我已经创建了一个带有 Ellipse 的列表框来显示图像。现在我想在用户选择 ListBox 中的任何项目时更改它的描边颜色。我的 ListBox XAML 代码及其 DataTemplate 如下
<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>
我知道如何更改整个列表项的前景，但我不知道如何更改椭圆笔画colour.To更改 ListBox 的前景色，我在下面的代码中实现了
<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 中的 属性 的逻辑，并通过 [=23= 使用此属性值].
<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}"
我目前正在研究 windows phone 8，我已经创建了一个带有 Ellipse 的列表框来显示图像。现在我想在用户选择 ListBox 中的任何项目时更改它的描边颜色。我的 ListBox XAML 代码及其 DataTemplate 如下
<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>
我知道如何更改整个列表项的前景，但我不知道如何更改椭圆笔画colour.To更改 ListBox 的前景色，我在下面的代码中实现了
<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 中的 属性 的逻辑，并通过 [=23= 使用此属性值].
<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}"