如何突出在列表框中的Windows Phone选中的项目?(How to highlight sel

2019-08-01 13:06发布

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

我的表像下面的图片

当我点击该选项2。 我想改变列表框像下面的图像,当删除点击我浏览到另一个页面。

Answer 1:

你可以添加一个道具在你的DataContext结构“isselected”的背后。

和+ =列表中的事件“的SelectionChanged”

你可以从手柄ARGS上下文数据:

    public IList AddedItems { get; }

    public IList RemovedItems { get; }

改变自己的isselected道具。



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>

您可以切换listBox.SelectedItem的布尔属性(IsSeleced)在SelectionChanged事件

注意:您需要保留旧的所选项目的参考,使新的一个为真之前做出选择的布尔值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}">


文章来源: How to highlight selected item in list box windows phone?