UserControl制作导航栏

最新推荐文章于 2024-11-12 19:40:13 发布

鲨鱼、萝卜

最新推荐文章于 2024-11-12 19:40:13 发布

阅读量534

点赞数

CC 4.0 BY-SA版权

分类专栏： # WPF 文章标签： WPF界面

本文链接：https://blog.youkuaiyun.com/weixin_42348162/article/details/103371310

WPF 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了一种在WPF中使用UserControl实现导航栏的方法。通过嵌套使用ScrollView、ListBox和Expander控件，创建了一级和二级导航菜单，并自定义了DataTemplate来展示导航项，同时实现了导航项的展开和收起效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于WPF的UserControl的导航栏

1.最外边放一个ScrollView控件，目的是如果导航栏超过固定高度时
　自动出现右侧下拉条。
2.在最外侧放置ListBox控件，作为一级导航按钮集合。
3.通过xmal设置ListBox.ItemTemplate的DataTemplate
　一级导航窗格的DataTemplate是Expander控件,并在后台添加
　Expander的Expanded 和Collapsed事件(扩展和收取事件)
4.将Expander的Content属性,即Expander点开所包含的内容控件,设置为
　ListBox,即二级导航按钮集合.
5.自定义设置二级导航按钮集合控件ListBox控件的
　ListBox.ItemTemplate的DataTemplate属性即二级导航按钮的
　模板

 <ScrollViewer VerticalScrollBarVisibility="Auto" Background="#FF080E3E">
            <ListBox x:Name="MainListBox" ItemsSource="{Binding}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" Background="#FF080E3E">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <Expander Style="{DynamicResource ExpanderStyle}" Width="{Binding Path=ActualWidth,ElementName=MainListBox}" Tag="{Binding}" Expanded="Expander_Expanded" Collapsed="Expander_Collapsed">
                            <Expander.Content>
                                <ListBox x:Name="ItemListBox" ItemsSource="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=Expander},Path=Tag.ItemLst}"
                                          ScrollViewer.HorizontalScrollBarVisibility="Disabled" GotFocus="ItemListBox_GotFocus" SelectionChanged="ItemListBox_SelectionChanged" Foreground="#FF0C1647">
                                    <ListBox.ItemTemplate>
                                        <DataTemplate>
                                            <Grid HorizontalAlignment="Left" Name="gdBackground" Width="{Binding Path=ActualWidth,ElementName=ItemListBox}" Height="30">
                                                <Image Width="28" Height="28" HorizontalAlignment="Left" Source="{Binding ImageUrl}"></Image>
                                                <TextBlock HorizontalAlignment="Left" Text="{Binding ItemName}" FontSize="16" Margin="30,0,0,0" Foreground="White" VerticalAlignment="Center" ></TextBlock>
                                            </Grid>
                                            <DataTemplate.Triggers>
                                                <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type ListBoxItem}},Path=IsSelected}" Value="true">
                                                    <Setter TargetName="gdBackground" Property="Background" Value="#FF223071"></Setter>
                                                </DataTrigger>
                                            </DataTemplate.Triggers>
                                        </DataTemplate>
                                    </ListBox.ItemTemplate>
                                </ListBox>
                            </Expander.Content>
                        </Expander>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </ScrollViewer>