当的Windows Phone 8选择列表框项目如何改变椭圆的行程？ [英] How to change stroke of Ellipse when ListBox item is selected in Windows Phone 8?

查看：104
本文介绍了当的Windows Phone 8选择列表框项目如何改变椭圆的行程？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我目前的工作在Windows Phone 8，我创建了一个列表框与椭圆里面显示的图像。现在我想，当用户在列表框中选择任何项目以更改笔触颜色吧。我的列表框XAML代码和它的DataTemplate低于

 < ListBox的X：名称=OwnerList
 ScrollViewer.Horizo​​ntalScrollBarVisibility =自动
 ScrollViewer.VerticalScrollBarVisibility =已禁用
 ItemsPanel ={StaticResource的FileItemsPanel}
的ItemTemplate ={StaticResource的OwnerListTemplate}
的SelectionMode =多
的SelectionChanged =OwnerList_SelectionChanged/>



的DataTemplate 

 <的DataTemplate X：键=OwnerListTemplate> 
< StackPanel的保证金=20,0,20,0> 
将;椭圆高度=120
宽度=120
保证金=4
行程=蓝
 StrokeThickness =2> 
< Ellipse.Fill> 
<的ImageBrush的ImageSource ={结合PHOTO，转换器= {StaticResource的Imageconverter}}/> 
< /Ellipse.Fill> 
< /椭圆> 
< TextBlock的X：名称=OWNERNAME
文本={结合NAME}
字号=22
前景=灰色
粗细= 大胆
的Horizo​​ntalAlignment =中心
 VerticalAlignment =中心/> 
< TextBlock的X：名称=距离
文本={结合距离}
字号=20
前景=灰色
的Horizo​​ntalAlignment = 中心
 VerticalAlignment =中心/> 
< / StackPanel的> 
< / DataTemplate中> 
 
 
< ItemsPanelTemplate X：键=FileItemsPanel> 
< StackPanel的方向=横向> 
< StackPanel.RenderTransform> 
将; TranslateTransform x =0/> 
< /StackPanel.RenderTransform> 
< / StackPanel的> 
< / ItemsPanelTemplate>



我知道如何改变整个列表项的前景，但我不知道如何改变椭圆中风colour.To改变前景色为ListBox中，我实现下面的代码

 <风格X：键=DynamicDataGenericListViewContainerStyle
的TargetType =ListBoxItem的> 
< setter属性=Horizo​​ntalContentAlignment
值=拉伸/> 
< setter属性=保证金
值=0,0,0,1/> 
< setter属性=填充
值=0/> 
 
< setter属性=模板> 
< Setter.Value> 
<的ControlTemplate的TargetType =ListBoxItem的> 
< BORDER X：NAME =LayoutRootBorderBrush ={TemplateBinding BorderBrush}了borderThickness ={TemplateBinding了borderThickness}后台={TemplateBinding背景}的Horizo​​ntalAlignment ={TemplateBinding的Horizo​​ntalAlignment}VerticalAlignment ={ TemplateBinding VerticalAlignment}> 
< VisualStateManager.VisualStateGroups> 
< VisualStateGroup X：NAME =CommonStates> 
<的VisualState X：名称=正常/> 
<的VisualState X：NAME =鼠标悬停/> 
<的VisualState X：名称=已禁用> 
<情节提要> 
< ObjectAnimationUsingKeyFrames Storyboard.TargetProperty =背景Storyboard.TargetName =LayoutRoot> 
< DiscreteObjectKeyFrame KeyTime =0值={StaticResource的TransparentBrush}/> 
< / ObjectAnimationUsingKeyFrames> 
< DoubleAnimation是持续时间=0= Storyboard.TargetProperty =透明度Storyboard.TargetName =ContentContainer/>5。 
< /故事板> 
< /&的VisualState GT; 
< / VisualStateGroup> 
< VisualStateGroup X：NAME =SelectionStates> 
<的VisualState X：NAME =未选定/> 
<的VisualState X：NAME =选择> 
<情节提要> 
< ObjectAnimationUsingKeyFrames Storyboard.TargetName =LayoutRoot
 Storyboard.TargetProperty =了borderThickness> 
< DiscreteObjectKeyFrame KeyTime =0值=0,0,0,2/> 
< / ObjectAnimationUsingKeyFrames> 
< ObjectAnimationUsingKeyFrames Storyboard.TargetName =LayoutRoot
 Storyboard.TargetProperty =BorderBrush> 
< DiscreteObjectKeyFrame KeyTime =0值={StaticResource的DynamicDataColor}/> 
< / ObjectAnimationUsingKeyFrames> 
 
< ObjectAnimationUsingKeyFrames Storyboard.TargetProperty =前景Storyboard.TargetName =ContentContainer> 
< DiscreteObjectKeyFrame KeyTime =0值={StaticResource的DynamicDataColor}/> 
< / ObjectAnimationUsingKeyFrames> 
< /故事板> 
< /&的VisualState GT; 
< / VisualStateGroup> 
< /VisualStateManager.VisualStateGroups> 
< ContentControl中X：NAME =ContentContainer的ContentTemplate ={TemplateBinding的ContentTemplate}CONTENT ={TemplateBinding内容}前景={TemplateBinding前景}Horizo​​ntalContentAlignment ={TemplateBinding Horizo​​ntalContentAlignment}保证金={ TemplateBinding填充}VerticalContentAlignment ={TemplateBinding VerticalContentAlignment}/> 
< /边框> 
< /控件模板> 
< /Setter.Value> 
< /二传手> 
 
< /样式和GT;


解决方案

您可以实施 INotifyPropertyChanged的来你的模型，并添加

 公共类产品型号：INotifyPropertyChanged的
 {
私人布尔_isSelected; 
 
公共字符串PHOTO {搞定;组; } 
 
公共字符串名称{;组; } 
 
公共字符串距离{搞定;组; } 
 
公共BOOL IsSelected 
 {
得到
 {
返回_isSelected; 
} 
组
 {
如果（！值= _isSelected）
 {
 _isSelected =价值; 
 RaisePropertyChanged（）; 
} 
} 
} 
 
公共事件PropertyChangedEventHandler的PropertyChanged; 
 
私人无效RaisePropertyChanged（[CallerMemberName]字符串参数propertyName = NULL）
 {
变种的PropertyChanged = Volatile.Read（REF的PropertyChanged）; 
如果（的PropertyChanged！= NULL）
 {
的PropertyChanged（这一点，新PropertyChangedEventArgs（propertyName的））; 
} 
} 
}



所以，在 OwnerList_SelectionChanged 你应该改变这个属性。

 私人无效OwnerList_SelectionChanged（对象发件人，SelectionChangedEventArgsê ）
 {
如果（e.AddedItems = NULL&放大器;！&安培; e.AddedItems.Count大于0）
 {
 VAR addedItem = e.AddedItems.Cast<模型与GT （）了ToList（）。 
的foreach（在addedItem VAR项）
 {
 item.IsSelected = TRUE; 
} 
} 
 
如果（e.RemovedItems =空&放大器;！&放大器; e.RemovedItems.Count大于0）
 {
变种removedItems = e.RemovedItems.Cast<模型与GT;（）了ToList（）。 
的foreach（在removedItems VAR项）
 {
 item.IsSelected = FALSE; 
} 
} 
}



创建简单的转换为行程 

 公共类EllipseStrokeConverter：的IValueConverter 
 {
公共对象转换（对象的值，类型TARGETTYPE，对象参数，CultureInfo的文化）
 {
 VAR的结果=新的SolidColorBrush（Colors.Blue）; 
如果（（布尔）值）
 {
结果=新的SolidColorBrush（Colors.Red）; 
} 
 
返回结果; 
} 
 
公共对象ConvertBack（对象的值，类型TARGETTYPE，对象参数，CultureInfo的文化）
 {
抛出新NotImplementedException（）; 
} 
}

和在你的模板

$使用b
$ b 

 <局部：EllipseStrokeConverter X：键=EllipseStrokeConverter/> 
 
<的DataTemplate X：键=OwnerListTemplate> 
< StackPanel的保证金=20,0,20,0> 
<椭圆HEIGHT =120
 WIDTH =120
保证金=4
行程={结合IsSelected，转换器= {StaticResource的EllipseStrokeConverter}}
 StrokeThickness =2> 
< Ellipse.Fill> 
<的ImageBrush的ImageSource ={结合PHOTO，转换器= {StaticResource的Imageconverter}}/> 
< /Ellipse.Fill> 
< /椭圆> 
< TextBlock的X：名称=OWNERNAME
文本={结合NAME}
字号=22
前景=灰色
粗细= 大胆
的Horizo​​ntalAlignment =中心
 VerticalAlignment =中心/> 
< TextBlock的X：名称=距离
文本={结合距离}
字号=20
前景=灰色
的Horizo​​ntalAlignment = 中心
 VerticalAlignment =中心/> 
< / StackPanel的> 
< / DataTemplate中>



更新



我不知道 C＃操纵另一种解决方案。在我们的 ListBoxItem的我们选择从 ContentControl中某些属性，这将是描述的DataTemplate 并通过绑定。

 <风格X：键=ListBoxItemStyle的TargetType =ListBoxItem的> 
< setter属性=背景值=透明/> 
< setter属性=了borderThicknessVALUE =0/> 
< setter属性=BorderBrushVALUE =透明/> 
< setter属性=填充VALUE =0/> 
< setter属性=Horizo​​ntalContentAlignmentVALUE =左/> 
< setter属性=VerticalContentAlignmentVALUE =顶部/> 
< setter属性=模板> 
< Setter.Value> 
<的ControlTemplate的TargetType =ListBoxItem的> 
< BORDER X：NAME =LayoutRootBorderBrush ={TemplateBinding BorderBrush}了borderThickness ={TemplateBinding了borderThickness}后台={TemplateBinding背景}的Horizo​​ntalAlignment ={TemplateBinding的Horizo​​ntalAlignment}VerticalAlignment ={ TemplateBinding VerticalAlignment}> 
< VisualStateManager.VisualStateGroups> 
< VisualStateGroup X：NAME =CommonStates> 
<的VisualState X：名称=正常/> 
<的VisualState X：NAME =鼠标悬停/> 
<的VisualState X：名称=已禁用> 
<情节提要> 
< ObjectAnimationUsingKeyFrames Storyboard.TargetProperty =背景Storyboard.TargetName =LayoutRoot> 
< DiscreteObjectKeyFrame KeyTime =0值={StaticResource的TransparentBrush}/> 
< / ObjectAnimationUsingKeyFrames> 
< DoubleAnimation是持续时间=0= Storyboard.TargetProperty =透明度Storyboard.TargetName =ContentContainer/>5。 
< /故事板> 
< /&的VisualState GT; 
< / VisualStateGroup> 
< VisualStateGroup X：NAME =SelectionStates> 
<的VisualState X：NAME =未选定/> 
<的VisualState X：NAME =选择> 
<情节提要> 
< ObjectAnimationUsingKeyFrames Storyboard.TargetName =ContentContainer
 Storyboard.TargetProperty =BorderBrush> 
< DiscreteObjectKeyFrame KeyTime =0值=黄色/> 
< / ObjectAnimationUsingKeyFrames> 
< /故事板> 
< /&的VisualState GT; 
< / VisualStateGroup> 
< /VisualStateManager.VisualStateGroups> 
< ContentControl中X：NAME =ContentContainer
 BorderBrush =蓝
的ContentTemplate ={TemplateBinding的ContentTemplate}
含量={TemplateBinding内容}
前景={TemplateBinding前景}
 Horizo​​ntalContentAlignment ={TemplateBinding Horizo​​ntalContentAlignment}
保证金={TemplateBinding填充}
 VerticalContentAlignment ={TemplateBinding VerticalContentAlignment}/> 
< /边框> 
< /控件模板> 
< /Setter.Value> 
< /二传手> 
< /样式和GT;



看看选可视状态的名字，我们改变我们在的DataTemplate 这样



使用 BorderBrush 属性值

 行程={结合BorderBrush，的ElementName = ContentContainer}


I am currently working on windows phone 8 and I have created a ListBox with Ellipse inside it to show images. Now I want to change the Stroke Colour for it when user selects any item in ListBox. My ListBox XAML code and its DataTemplate is below

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

I know how to change foreground of an entire list item, but I am not aware how to change ellipse stroke colour.To change Foreground color for ListBox , I implemented below code

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

解决方案

You can implement INotifyPropertyChanged to your model and add 

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));
        }
    }
}

So, in OwnerList_SelectionChanged you should to change this property

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

Create simple converter for 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();
    }
}

and use it in your template

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

UPDATE

I know another solution without C# manipulation. In our ListBoxItem we choose some property from ContentControl, which will be describe logic for our property in DataTemplate and use this proeprty value via 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>

Look at Selected visual state name where we change BorderBrush property value which we use in DataTemplate in this way

Stroke="{Binding BorderBrush, ElementName=ContentContainer}"

这篇关于当的Windows Phone 8选择列表框项目如何改变椭圆的行程？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
C#/.NET最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆