如何在Windows Phone 8中選擇ListBox項目時更改橢圓的筆劃？

Question

我目前正在研究windows phone 8，並且我已經創建了一個帶有Ellipse的ListBox來顯示圖像。現在我想在用戶選擇ListBox中的任何項目時爲其更改Stroke Color。我的列表框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> 

我知道如何改變整個列表項的前景，但我不知道如何改變橢圓行程colour.To變化前景顏色列表框，我實現下面的代碼

<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

您可以實現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使用此proeprty值。

<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可視狀態的名字，我們改變我們在DataTemplate使用這種方式

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