在Windows Phone 8中选择ListBox项目时,如何更改椭圆的笔触?

金贾·巴萨(Kinjan Bhavsar)

我目前在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>
安德烈·克鲁普卡(Andrii Krupka)

您可以实现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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在multilistpicker Windows Phone 8中选择多个项目

来自分类Dev

Windows Phone中的Lazzy Listbox

来自分类Dev

Windows Phone 8记录

来自分类Dev

Windows Phone 8的LockScreen

来自分类Dev

Windows Phone 8记录

来自分类Dev

如何访问Windows Phone?

来自分类Dev

Windows Phone中的DrawerLayout

来自分类Dev

在Windows Phone 8中选择任何值时,下拉框上的蓝色突出显示

来自分类Dev

在Windows Phone 8中选择任何值时,下拉框上的蓝色突出显示

来自分类Dev

Windows Phone 8中的NavigationDrawer

来自分类Dev

Windows Phone 8中的getrequeststream

来自分类Dev

Windows Phone 8中的NavigationDrawer

来自分类Dev

如何禁用选择列表视图Windows Phone中的某些项目

来自分类Dev

如何从Windows Phone 8中的列表中删除项目?

来自分类Dev

如何在Windows Phone 8中创建项目符号列表?

来自分类Dev

“ Windows Phone Silverlight 8”是否与“ Windows Phone 8”相同?

来自分类Dev

Windows Phone Toolkit的Windows Phone 8占位符问题

来自分类Dev

Windows Phone 8 App升级到Windows Phone 8.1

来自分类Dev

在Windows Phone 8.1上运行Windows Phone 8应用

来自分类Dev

Windows Phone 8 Image Binding

来自分类Dev

Windows Phone 8:显示pdf

来自分类Dev

Windows Phone 8蓝牙开发

来自分类Dev

Windows Phone 8图像绑定

来自分类Dev

Windows Phone 8-PriorityBinding

来自分类Dev

SetSysTrayVisible错误Windows Phone 8

来自分类Dev

从代码锁定Windows Phone 8

来自分类Dev

对Windows Phone 8使用WNS

来自分类Dev

滚动浏览Windows Phone 8

来自分类Dev

Windows Phone 8进度栏