我目前在Windows Phone 8上工作,并且创建了一个列表框,里面有椭圆形以显示图像。现在,当用户在列表框中选择任何项目时,我想为其更改“笔触颜色”。我的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>
我知道如何更改整个列表项的前景色,但我不知道如何更改椭圆笔触颜色。要更改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
并通过使用此属性值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}"
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句