Question

大家好，我使用列表框创建水平菜单，我面临的问题是所选菜单没有突出显示。

以下是我的XAML页面

<Style x:Key="ListBoxItemStyle1" TargetType="ListBoxItem">
            <Setter Property="Background" Value="{ThemeResource ApplicationPageBackgroundThemeBrush}"/>
            <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="{ThemeResource ApplicationPageBackgroundThemeBrush}" 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"/>
                                            </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="White"/>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames
                                    Storyboard.TargetName="border"
                                    Storyboard.TargetProperty="Background"
                                    Duration="0">
                                                <DiscreteObjectKeyFrame  KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <SolidColorBrush Color="White"/>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <StackPanel x:Name="border" Orientation="Horizontal">
                                <ContentControl x:Name="ContentContainer"  Foreground="{ThemeResource ApplicationForegroundThemeBrush}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
                                    <StackPanel x:Name="insidestack"  >
                                        <StackPanel>
                                            <TextBlock Text="{Binding TitleofAccess}" FontWeight="SemiBold" TextAlignment="Center" Margin="10" VerticalAlignment="Center"  FontSize="20" Foreground="{ThemeResource ApplicationForegroundThemeBrush}"  />
                                        </StackPanel>
                                    </StackPanel>
                                </ContentControl>
                            </StackPanel>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

                <ListBox Name="MenuListbox" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Foreground="{ThemeResource ApplicationForegroundThemeBrush}" ScrollViewer.HorizontalScrollBarVisibility="Hidden" ScrollViewer.VerticalScrollBarVisibility="Disabled" Tapped="MenuListbox_SelectionChanged" ItemContainerStyle="{StaticResource ListBoxItemStyle1}" SelectionMode="Single">
                    <ListBox.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
                       HorizontalAlignment="Left"/>
                        </ItemsPanelTemplate>
                    </ListBox.ItemsPanel>
                </ListBox>
            </ScrollViewer>

以下是我附加ItemSource for ListBox

的数据

仍然无法将所选菜单作为突出显示的菜单。任何有关这方面的帮助都将有助于克服这个问题。

提前谢谢。

你好chirag

请参阅附件

Answer 1

所以，关于你的模板，我会改变一些事情。但是，对于您的直接问题，请交换当前的Frame动画;

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="border"
                               Storyboard.TargetProperty="Background"
                               Duration="0">
    <DiscreteObjectKeyFrame KeyTime="0">
       <DiscreteObjectKeyFrame.Value>
          <SolidColorBrush Color="White"/>
       </DiscreteObjectKeyFrame.Value>
    </DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>

在正确的ColorAnimation目标属性中使用直接UIElement来查看;

<ColorAnimation Storyboard.TargetName="border" 
                Storyboard.TargetProperty="(UIElement.Background).(SolidColorBrush.Color)"
                Duration="0" To="White" />

希望这有帮助，欢呼！

增加：

所以，因为我几乎没有真正测试过我的答案（我知道的坏习惯，但一般来说它们都是正确的。）在这种情况下，我没有时间去做，但这是我做的保证工作并且无论如何都是更好的形式。

拿走你在这里的东西;

<StackPanel x:Name="border" Orientation="Horizontal">
                                <ContentControl x:Name="ContentContainer"  Foreground="{ThemeResource ApplicationForegroundThemeBrush}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
                                    <StackPanel x:Name="insidestack"  >
                                        <StackPanel>
                                            <TextBlock Text="{Binding TitleofAccess}" FontWeight="SemiBold" TextAlignment="Center" Margin="10" VerticalAlignment="Center"  FontSize="20" Foreground="{ThemeResource ApplicationForegroundThemeBrush}"  />
                                        </StackPanel>
                                    </StackPanel>
                                </ContentControl>
                            </StackPanel>

由于我不明白为什么你需要像这样的StackPanel或ContentControl，所以像这样交换（最小的改变，但如果是我，我会重构所有这些）;

<Grid>
<Border x:Name="SelectedState" Background="Red" Visibility="Collapsed">
 <ContentControl x:Name="ContentContainer"  
                 Foreground="{ThemeResource ApplicationForegroundThemeBrush}" 
                 HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
                 Margin="{TemplateBinding Padding}" 
                 VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">

      <TextBlock Text="{Binding TitleofAccess}" FontWeight="SemiBold" TextAlignment="Center" Margin="10" VerticalAlignment="Center"  FontSize="20" Foreground="{ThemeResource ApplicationForegroundThemeBrush}"  />

  </ContentControl>

</Grid>

然后只需切换其中一个边框的可见性，即可提供如下所示的背景。我们这样做是因为最好切换一个对象，而不是分开很多属性（由于某种原因，这会给你警告）;

<VisualState x:Name="Selected">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="SelectedState">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>

抱歉，我没时间格式化。但是我想重申一下，很明显你对模板和VisualStateManager的工作方式都很陌生，我会考虑重整这个控件，即使它是必要的小改动，因为它的很多部分都没有意义。为什么他们按照你拥有它们的方式完成。干杯

Answer 2

在列表框中添加以下代码。

<ListBox Name="MenuListbox" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Foreground="{ThemeResource ApplicationForegroundThemeBrush}" ScrollViewer.HorizontalScrollBarVisibility="Hidden" ScrollViewer.VerticalScrollBarVisibility="Disabled" Tapped="MenuListbox_SelectionChanged" ItemContainerStyle="{StaticResource ListBoxItemStyle1}" SelectionMode="Single">
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
                   HorizontalAlignment="Left"/>
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>

                <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel x:Name="insidestack">
                        <StackPanel>
                            <TextBlock Text="{Binding TitleofAccess}"
                                       FontWeight="SemiBold"
                                       TextAlignment="Center"
                                       Margin="10"
                                       VerticalAlignment="Center"
                                       FontSize="20"
                                       Foreground="{ThemeResource ApplicationForegroundThemeBrush}" />
                        </StackPanel>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
</ListBox>

希望它有效。

突出显示列表框Windows Phone 8.1中的当前选定菜单

2 个答案: