如何突出顯示列表框中的選定項目windows phone？

我正在開發一個Windows Phone應用程序。我在我的應用程序中放置了列表框控件並顯示了一個列表。我需要用藍色突出顯示選定的行。我怎樣才能做到這一點？。我試了一個代碼。但它不工作。我添加下面使用的代碼。請幫忙。如何突出顯示列表框中的選定項目windows phone？

<ListBox Margin="0,0,0,0" Name="MyList" ScrollViewer.VerticalScrollBarVisibility="Disabled" ItemContainerStyle="{StaticResource ListBoxItemStyle1}"> 
          <ListBox.ItemTemplate> 
           <DataTemplate> 
            <StackPanel Background="Transparent" Margin="10,0,0,0"> 

              <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Height="55" Margin="20,10,0,0"> 
               <StackPanel> 
                <TextBlock Text="{Binding Option}" FontWeight="Bold" HorizontalAlignment="Left" Foreground="Black" FontSize="23" Margin="0,0,0,0" Width="250" ></TextBlock> 
               </StackPanel> 
               <StackPanel Margin="100,0,0,0"> 
                <Image Margin="0,10,0,0" Source="/Images/arrow.png"></Image> 
               </StackPanel> 
              </StackPanel> 

             <Rectangle Fill="Gray" Height="1" HorizontalAlignment="Stretch" Width="440" /> 
            </StackPanel> 
           </DataTemplate> 
          </ListBox.ItemTemplate> 
         </ListBox>

風格：

<Style x:Key="ListBoxItemStyle1" 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"/> 

          </VisualStateGroup> 
          <VisualStateGroup x:Name="SelectionStates"> 
           <VisualState x:Name="Unselected"> 
            <Storyboard> 
             <ColorAnimation Duration="0" To="White" Storyboard.TargetProperty="(Control.Background).(SolidColorBrush.Color)" Storyboard.TargetName="ContentContainer" /> 
             <ColorAnimation Duration="0" To="White" Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="ContentContainer" /> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Selected"> 
            <Storyboard> 
             <ColorAnimation Duration="0" To="Blue" Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="ContentContainer" /> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="SelectedUnfocused"> 
            <Storyboard> 
             <ColorAnimation Duration="0" To="Blue" Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="ContentContainer" /> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
         <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="#FF1BA1E2" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Background="Black" BorderBrush="Black"/> 
        </Border> 
       </ControlTemplate> 

      </Setter.Value> 
     </Setter> 
    </Style>

我的目錄就像下面的圖片

enter image description here

當我點擊該選項2。我想改變像下面的圖像列表框，當刪除點擊我導航到另一個頁面。

enter image description here

來源

2012-10-16 Arun

您是否能夠解決該問題？即使我卡在這裏，你可以請給我提供解決方案 – Goofy

是這個問題解決..如果是的請提供解決方案..我來到這裏。 –

方法1

移動DataTemplate到用戶控制。在其中創建一個Boolean依賴項屬性IsSelected。然後把你的stackpanel放在一個border控件中，根據它的布爾值，你的背景必須toggle。我希望它有幫助。

方法2

在您的數據對象中創建一個布爾屬性。將其綁定到放置在數據模板中的邊框元素。

<Grid> 
    <Border Background="Blue" Visibility="{Binding IsSelcted}" Canvas.ZIndex="-1"/> 
    <StackPanel Background="Transparent" Margin="10,0,0,0"> 
     <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Height="55" Margin="20,10,0,0"> 
     <StackPanel> 
      <TextBlock Text="{Binding Option}" FontWeight="Bold" HorizontalAlignment="Left" Foreground="Black" FontSize="23" Margin="0,0,0,0" Width="250" >   
      </TextBlock> 
      </StackPanel> 
      <StackPanel Margin="100,0,0,0"> 
      <Image Margin="0,10,0,0" Source="/Images/arrow.png"></Image> 
      </StackPanel> 
     </StackPanel> 
    </Grid>

您可以切換listBox.SelectedItem的布爾屬性（IsSeleced）在SelectionChanged事件

注意：您需要保留舊的所選項目的參考，使之前做出選擇布爾值false新的一個是真的。

我希望它有幫助。

來源

2012-10-16 09:16:53

能否給我們提供清晰的例子？ – Goofy

增加了另一個例子的方法。希望能幫助到你。 –

你可以在你的datacontext結構體後面添加一個道具「isselected」。

和+ =列表中的事件「的SelectionChanged」

你可以從手柄ARGS獲取上下文數據：

public IList AddedItems { get; } 

    public IList RemovedItems { get; }

改變他們的isselected道具。

來源

2012-10-16 09:31:11 MengMeng

對不起，我是wp7中的新手。我不明白你的回答。你能說清楚嗎？ – Arun

利用這個代碼來創建你的風格的列表框，在這裏我做背景透明，根據您的要求修改代碼.. 粘貼MainPage.xaml中此之上，但之後，所有引用是完整的

<Style x:Key="CustomListBoxItemStyle" TargetType="ListBoxItem"> 
     <Setter Property="Background" Value="Transparent"/> 
     <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/> 
     <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="Foreground" 
           Duration="0"> 
              <DiscreteObjectKeyFrame KeyTime="0"> 
               <DiscreteObjectKeyFrame.Value> 
                <SolidColorBrush Color="{StaticResource PhoneAccentColor}"/> 
               </DiscreteObjectKeyFrame.Value> 
              </DiscreteObjectKeyFrame> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames 
           Storyboard.TargetName="border" 
           Storyboard.TargetProperty="Background" 
           Duration="0"> 
              <DiscreteObjectKeyFrame KeyTime="0"> 
               <DiscreteObjectKeyFrame.Value> 
                <SolidColorBrush Color="Transparent"/> 
               </DiscreteObjectKeyFrame.Value> 
              </DiscreteObjectKeyFrame> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
         <StackPanel x:Name="border" Orientation="Horizontal">         
          <ContentControl x:Name="ContentContainer" 
              ContentTemplate="{TemplateBinding ContentTemplate}" 
              Content="{TemplateBinding Content}" 
              Foreground="{TemplateBinding Foreground}" 
              HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
              Margin="{TemplateBinding Padding}" 
              VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/> 
         </StackPanel> 
        </Border> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style>

並將其指向您的列表框

  <ListBox ItemContainerStyle="{StaticResource CustomListBoxItemStyle}">

來源

2016-11-29 13:19:39

如何突出顯示列表框中的選定項目windows phone？

回答

相關問題