Question

我正在开发一个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

Answer 1

你可以在你的datacontext结构中添加一个道具“isselected”。

和+ =列表的事件“SelectionChanged”

您可以从句柄args获取上下文数据：

    public IList AddedItems { get; }

    public IList RemovedItems { get; }

改变他们的选择道具。

Answer 2

方法1

将DataTemplate移动到用户控件。在其中创建Boolean依赖项属性IsSelected。然后将stackpanel置于border控件内，该控件的背景为toggle，基于其布尔值。我希望它有所帮助。

方法2

在数据对象中创建一个布尔属性。将它绑定到放置在datatemplate内的边框元素。

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

您可以在selectionchanged事件中切换listBox.SelectedItem的布尔属性（IsSeleced）

注意：您需要保留旧选定项的引用，并在将新选项设为true之前将其选中的布尔值设为false。

我希望它有所帮助。

Answer 3

使用此代码为列表框创建样式，在这里我使背景透明，根据您的要求修改代码。粘贴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}">

如何在列表框windows phone中突出显示所选项目？

3 个答案: