How to change stroke of Ellipse when ListBox item is selected in Windows Phone 8?

Question

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>

Answer 1

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