logo标签列表

如何在 Windows Phone 8 中，在选中 ListBox 项时更改椭圆形的描边？

c#windows-phone-8
13

我目前正在开发Windows Phone 8应用，我创建了一个带有圆形椭圆的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 数据模板

<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>
将描边颜色绑定到某个属性上，然后在单击时更改该属性。 - vITs
检查 INotifyPropertyChanged！ - vITs
好的，但是使用可视状态管理器不可能吗？因为当我从服务器获取值时，可能会有100条记录，为每个记录添加一个新参数（例如颜色属性）将导致我运行100次循环。 - Kinjan Bhavsar
有人在StackOverflow能帮我吗？ - Kinjan Bhavsar
将您的UI直接绑定到从服务器接收到的列表。 - vITs
显示剩余3条评论
1个回答
4
你可以在你的模型中实现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;
            }
        }
    }

创建一个简单的转换器来处理笔画

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>

请看我们在这里更改DataTemplate中使用的BorderBrush属性值时，所用的Selected视觉状态名称

Stroke="{Binding BorderBrush, ElementName=ContentContainer}"
谢谢 Andrii。你能告诉我在 Model 类中我需要在哪里添加 INotifyPropertyChanged 吗？因为我从未使用过它，所以需要编辑你的类。 - Kinjan Bhavsar
我更新了答案，并在“Model”上添加了“INotifyPropertyChanged”实现。希望能对你有所帮助。 - Andrii Krupka
在可视状态管理器的情况下，即使未选中，它也显示黄色作为描边颜色，我需要从可视状态管理器中删除未选中吗？ - Kinjan Bhavsar
我没有理解你的意思，如果项目未被选中 - 一切都正常。Stroke变为Blue。 - Andrii Krupka
@KinjanBhavsar 我从未使用过ResClient。尝试使用HttpClient，也许它会对你有帮助。 - Andrii Krupka
显示剩余2条评论
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接