如何在Windows Phone 8中选择ListBox项目时更改Ellipse的笔划?

时间:2016-02-10 17:11:03

标签: c# windows-phone-8

我目前正在使用Windows Phone 8,我在其中创建了一个带有Ellipse的ListBox来显示图像。现在我想在用户选择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>

1 个答案:

答案 0 :(得分:4)

您可以为模型实施MATCH (source_tweet:Tweet {userId: 1234})<-[:RETWEET_OF]-(retweet:Tweet) RETURN source_tweet:Tweet.id, source_tweet:Tweet.text, count(retweet) 并添加

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}"