ScrollViewer 中的垂直条 (VerticalScrollBar) 不像 WPF 中的 Expander 那样与 UserControl 一起显示 XAML

Question

我有一个 UserControl，它包含一个 Expander，它包含一个 ContentControl。但是当我在MainWindow中调用控件时，ScrollViewer的竖条没有出现，而且内容跑框了。

控件XAML

<UserControl x:Class="UserControlMenuItem"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:Core"
             xmlns:md="http://materialdesigninxaml.net/winfx/xaml/themes"
             mc:Ignorable="d" >
    <Grid>
        <md:PackIcon Kind="{Binding Path=Icon}" Width="15" Height="15" Margin="10 16" Foreground="{DynamicResource PrimaryHueMidForegroundBrush}"/>
        <!--<ListViewItem x:Name="ListViewItemMenu" Content="{Binding Path=Header}" Padding="37 14" FontSize="15" Foreground="{DynamicResource PrimaryHueMidForegroundBrush}"/>-->
        <Expander x:Name="ExpanderMenu" Header="{Binding Path=Header}" IsExpanded="False" Width="210" HorizontalAlignment="Right" Background="{x:Null}" Foreground="{DynamicResource PrimaryHueMidForegroundBrush}">
            <ContentControl Content="{Binding ListView}"/>
        </Expander>
    </Grid>
</UserControl>

用户控件 C# 代码

    public partial class UserControlMenuItem : UserControl
    {
        //MainWindow _context;
        public static readonly DependencyProperty HeaderProperty = DependencyProperty.Register("Header", typeof(string), typeof(UserControlMenuItem));
        public string Header
        {
            get
            {
                return (string)GetValue(HeaderProperty);
            }
            set
            {
                SetValue(HeaderProperty, value);
            }
        }

        public static readonly DependencyProperty IconProperty = DependencyProperty.Register("Icon", typeof(PackIconKind), typeof(UserControlMenuItem));
        public PackIconKind Icon
        {
            get
            {
                return (PackIconKind)GetValue(IconProperty);
            }
            set
            {
                SetValue(IconProperty, value);
            }
        }
        public static readonly DependencyProperty ListViewProperty = DependencyProperty.Register("ListView", typeof(ListView), typeof(UserControlMenuItem), new UIPropertyMetadata(null));
        public ListView ListView
        {
            get
            {
                return (ListView)GetValue(ListViewProperty);
            }
            set
            {
                SetValue(ListViewProperty, value);
            }
        }
        public UserControlMenuItem()
        {
            InitializeComponent();
            DataContext = this;
        }

    }

在 ScrollViewer 中调用 UserControl

                    <ScrollViewer HorizontalAlignment="Stretch" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
                        <StackPanel Orientation="Vertical">                            
                            <core:UserControlMenuItem x:Name="MenuItemHome" Header="Home" Icon="Home">
                                <core:UserControlMenuItem.ListView>
                                    <ListView Margin="0 16 0 16" SelectedIndex="0" PreviewMouseLeftButtonUp="ListBox_PreviewMouseLeftButtonUp">
                                        <core:LiveExplorerListBoxItem SampleType="{x:Type samples:Home.Views.Home}" Style="{StaticResource MaterialDesignListBoxItem2}" PreviewMouseDown="LiveExplorerListBoxItem_PreviewMouseDown">
                                            <TextBlock Text="Home" Margin="10 5"/>
                                        </core:LiveExplorerListBoxItem>
                                        <core:LiveExplorerListBoxItem SampleType="{x:Type samples:Palette.Views.PaletteSelector}" Style="{StaticResource MaterialDesignListBoxItem2}" PreviewMouseDown="LiveExplorerListBoxItem_PreviewMouseDown">
                                            <TextBlock Text="Palette" Margin="10 5"/>
                                        </core:LiveExplorerListBoxItem>
                                    </ListView>
                                </core:UserControlMenuItem.ListView>
                            </core:UserControlMenuItem>
                            <core:UserControlMenuItem Header="Data" Icon="ViewList">
                                <core:UserControlMenuItem.ListView>
                                    <ListView Margin="0 16 0 16" PreviewMouseLeftButtonUp="ListBox_PreviewMouseLeftButtonUp">
                                        <core:LiveExplorerListBoxItem SampleType="{x:Type samples:DataGrid.Views.DataGridView}" Style="{StaticResource MaterialDesignListBoxItem2}" PreviewMouseDown="LiveExplorerListBoxItem_PreviewMouseDown">
                                            <TextBlock Text="DataGrid" Margin="10 5"/>
                                        </core:LiveExplorerListBoxItem>
                                        <core:LiveExplorerListBoxItem SampleType="{x:Type samples:DataGrid.Views.MultiColumnComboBoxView}" Style="{StaticResource MaterialDesignListBoxItem2}" PreviewMouseDown="LiveExplorerListBoxItem_PreviewMouseDown">
                                            <TextBlock Text="Multi-Column ComboBox" Margin="10 5"/>
                                        </core:LiveExplorerListBoxItem>
                                        <core:LiveExplorerListBoxItem SampleType="{x:Type samples:CollectionControl.Views.CollectionControlView}" Style="{StaticResource MaterialDesignListBoxItem2}" PreviewMouseDown="LiveExplorerListBoxItem_PreviewMouseDown">
                                            <TextBlock Text="CollectionControl" Margin="10 5"/>
                                        </core:LiveExplorerListBoxItem>
                                        <core:LiveExplorerListBoxItem SampleType="{x:Type samples:CheckLists.Views.CheckListsView}" Style="{StaticResource MaterialDesignListBoxItem2}" PreviewMouseDown="LiveExplorerListBoxItem_PreviewMouseDown">
                                            <TextBlock Text="Check List" Margin="10 5"/>
                                        </core:LiveExplorerListBoxItem>
                                        <core:LiveExplorerListBoxItem SampleType="{x:Type samples:PropertyGrid.Views.PropertyGridSelectedObjectView}" Style="{StaticResource MaterialDesignListBoxItem2}" PreviewMouseDown="LiveExplorerListBoxItem_PreviewMouseDown">
                                            <TextBlock Text="PropertyGrid (Using selected object(s))" Margin="10 5"/>
                                        </core:LiveExplorerListBoxItem>
                                        <core:LiveExplorerListBoxItem SampleType="{x:Type samples:WatermarkComboBox.Views.WatermarkComboBoxView}" Style="{StaticResource MaterialDesignListBoxItem2}" PreviewMouseDown="LiveExplorerListBoxItem_PreviewMouseDown">
                                            <TextBlock Text="WatermarkComboBox" Margin="10 5"/>
                                        </core:LiveExplorerListBoxItem>
                                        <core:LiveExplorerListBoxItem SampleType="{x:Type samples:ExtTabControl.Views.ExtTabControlView}" Style="{StaticResource MaterialDesignListBoxItem2}" PreviewMouseDown="LiveExplorerListBoxItem_PreviewMouseDown">
                                            <TextBlock Text="ExtendedTabControl" Margin="10 5"/>
                                        </core:LiveExplorerListBoxItem>
                                    </ListView>
                                </core:UserControlMenuItem.ListView>
                            </core:UserControlMenuItem>
                            <core:UserControlMenuItem Header="Input Fields" Icon="Input">
                                <core:UserControlMenuItem.ListView>
                                    <ListView Margin="0 16 0 16" PreviewMouseLeftButtonUp="ListBox_PreviewMouseLeftButtonUp">
                                        <core:LiveExplorerListBoxItem SampleType="{x:Type samples:Numeric.Views.NumericView}" Style="{StaticResource MaterialDesignListBoxItem2}" PreviewMouseDown="LiveExplorerListBoxItem_PreviewMouseDown">
                                            <TextBlock Text="Numeric" Margin="10 5"/>
                                        </core:LiveExplorerListBoxItem>
                                        <core:LiveExplorerListBoxItem SampleType="{x:Type samples:DateTime.Views.DateTimeView}" Style="{StaticResource MaterialDesignListBoxItem2}" PreviewMouseDown="LiveExplorerListBoxItem_PreviewMouseDown">
                                            <TextBlock Text="DateTime" Margin="10 5"/>
                                        </core:LiveExplorerListBoxItem>
                                        <core:LiveExplorerListBoxItem SampleType="{x:Type samples:TimeSpan.Views.TimeSpanView}" Style="{StaticResource MaterialDesignListBoxItem2}" PreviewMouseDown="LiveExplorerListBoxItem_PreviewMouseDown">
                                            <TextBlock Text="TimeSpan" Margin="10 5"/>
                                        </core:LiveExplorerListBoxItem>
                                        <core:LiveExplorerListBoxItem SampleType="{x:Type samples:Color.Views.ColorView}" Style="{StaticResource MaterialDesignListBoxItem2}" PreviewMouseDown="LiveExplorerListBoxItem_PreviewMouseDown">
                                            <TextBlock Text="Color" Margin="10 5"/>
                                        </core:LiveExplorerListBoxItem>
                                        <core:LiveExplorerListBoxItem SampleType="{x:Type samples:FilePicker.Views.FilePickerView}" Style="{StaticResource MaterialDesignListBoxItem2}" PreviewMouseDown="LiveExplorerListBoxItem_PreviewMouseDown">
                                            <TextBlock Text="FilePicker" Margin="10 5"/>
                                        </core:LiveExplorerListBoxItem>
                                        <core:LiveExplorerListBoxItem SampleType="{x:Type samples:RangeSlider.Views.RangeSliderView}" Style="{StaticResource MaterialDesignListBoxItem2}" PreviewMouseDown="LiveExplorerListBoxItem_PreviewMouseDown">
                                            <TextBlock Text="RangeSlider" Margin="10 5"/>
                                        </core:LiveExplorerListBoxItem>
                                        <core:LiveExplorerListBoxItem SampleType="{x:Type samples:ToggleSwitch.Views.ToggleSwitchView}" Style="{StaticResource MaterialDesignListBoxItem2}" PreviewMouseDown="LiveExplorerListBoxItem_PreviewMouseDown">
                                            <TextBlock Text="ToggleSwitch" Margin="10 5"/>
                                        </core:LiveExplorerListBoxItem>
                                        <core:LiveExplorerListBoxItem SampleType="{x:Type samples:Button.Views.ButtonSpinnerView}" Style="{StaticResource MaterialDesignListBoxItem2}" PreviewMouseDown="LiveExplorerListBoxItem_PreviewMouseDown">
                                            <TextBlock Text="Enumeration" Margin="10 5"/>
                                        </core:LiveExplorerListBoxItem>
                                    </ListView>
                                </core:UserControlMenuItem.ListView>
                            </core:UserControlMenuItem>
                            <core:UserControlMenuItem Header="Text" Icon="TextBox">
                                <core:UserControlMenuItem.ListView>
                                    <ListView Margin="0 16 0 16" PreviewMouseLeftButtonUp="ListBox_PreviewMouseLeftButtonUp">
                                        <core:LiveExplorerListBoxItem SampleType="{x:Type samples:Text.Views.AutoSelectTextboxView}" Style="{StaticResource MaterialDesignListBoxItem2}" PreviewMouseDown="LiveExplorerListBoxItem_PreviewMouseDown">
                                            <TextBlock Text="AutoSelectTextBox" Margin="10 5"/>
                                        </core:LiveExplorerListBoxItem>
                                        <core:LiveExplorerListBoxItem SampleType="{x:Type samples:Text.Views.MaskedTextboxView}" Style="{StaticResource MaterialDesignListBoxItem2}" PreviewMouseDown="LiveExplorerListBoxItem_PreviewMouseDown">
                                            <TextBlock Text="MaskedTextBox" Margin="10 5"/>
                                        </core:LiveExplorerListBoxItem>
                                        <core:LiveExplorerListBoxItem SampleType="{x:Type samples:Text.Views.MultiLineTextEditorView}" Style="{StaticResource MaterialDesignListBoxItem2}" PreviewMouseDown="LiveExplorerListBoxItem_PreviewMouseDown">
                                            <TextBlock Text="MultiLineTextEditor" Margin="10 5"/>
                                        </core:LiveExplorerListBoxItem>
                                        <core:LiveExplorerListBoxItem SampleType="{x:Type samples:Text.Views.RichTextboxView}" Style="{StaticResource MaterialDesignListBoxItem2}" PreviewMouseDown="LiveExplorerListBoxItem_PreviewMouseDown">
                                            <TextBlock Text="RichTextBox" Margin="10 5"/>
                                        </core:LiveExplorerListBoxItem>
                                        <core:LiveExplorerListBoxItem SampleType="{x:Type samples:Text.Views.WatermarkTextboxView}" Style="{StaticResource MaterialDesignListBoxItem2}" PreviewMouseDown="LiveExplorerListBoxItem_PreviewMouseDown">
                                            <TextBlock Text="WatermarkTextBox" Margin="10 5"/>
                                        </core:LiveExplorerListBoxItem>
                                        <core:LiveExplorerListBoxItem SampleType="{x:Type samples:Text.Views.WatermarkPasswordBoxView}" Style="{StaticResource MaterialDesignListBoxItem2}" PreviewMouseDown="LiveExplorerListBoxItem_PreviewMouseDown">
                                            <TextBlock Text="WatermarkPasswordBox" Margin="10 5"/>
                                        </core:LiveExplorerListBoxItem>
                                        <core:LiveExplorerListBoxItem SampleType="{x:Type samples:Text.Views.TokenizedTextBoxView}" Style="{StaticResource MaterialDesignListBoxItem2}" PreviewMouseDown="LiveExplorerListBoxItem_PreviewMouseDown">
                                            <TextBlock Text="TokenizedTextBox" Margin="10 5"/>
                                        </core:LiveExplorerListBoxItem>
                                    </ListView>
                                </core:UserControlMenuItem.ListView>
                            </core:UserControlMenuItem>
                            <core:UserControlMenuItem Header="Buttons" Icon="Button">
                                <core:UserControlMenuItem.ListView>
                                    <ListView Margin="0 16 0 16" PreviewMouseLeftButtonUp="ListBox_PreviewMouseLeftButtonUp">
                                        <core:LiveExplorerListBoxItem SampleType="{x:Type samples:Button.Views.DropDownSplitButtonView}" Style="{StaticResource MaterialDesignListBoxItem2}" PreviewMouseDown="LiveExplorerListBoxItem_PreviewMouseDown">
                                            <TextBlock Text="DropDown and Split Buttons" Margin="10 5"/>
                                        </core:LiveExplorerListBoxItem>
                                        <core:LiveExplorerListBoxItem SampleType="{x:Type samples:Button.Views.IconButtonView}" Style="{StaticResource MaterialDesignListBoxItem2}" PreviewMouseDown="LiveExplorerListBoxItem_PreviewMouseDown">
                                            <TextBlock Text="IconButton" Margin="10 5"/>
                                        </core:LiveExplorerListBoxItem>
                                    </ListView>
                                </core:UserControlMenuItem.ListView>
                            </core:UserControlMenuItem>
                            <core:UserControlMenuItem Header="Windows" Icon="DesktopWindows">
                                <core:UserControlMenuItem.ListView>
                                    <ListView Margin="0 16 0 16" PreviewMouseLeftButtonUp="ListBox_PreviewMouseLeftButtonUp">
                                        <core:LiveExplorerListBoxItem SampleType="{x:Type samples:Window.Views.ChildWindowView}" Style="{StaticResource MaterialDesignListBoxItem2}" PreviewMouseDown="LiveExplorerListBoxItem_PreviewMouseDown">
                                            <TextBlock Text="ChildWindow" Margin="10 5"/>
                                        </core:LiveExplorerListBoxItem>
                                        <core:LiveExplorerListBoxItem SampleType="{x:Type samples:Window.Views.WindowContainerView}" Style="{StaticResource MaterialDesignListBoxItem2}" PreviewMouseDown="LiveExplorerListBoxItem_PreviewMouseDown">
                                            <TextBlock Text="WindowContainer" Margin="10 5"/>
                                        </core:LiveExplorerListBoxItem>
                                    </ListView>
                                </core:UserControlMenuItem.ListView>
                            </core:UserControlMenuItem>
                            <core:UserControlMenuItem Header="Productivity" Icon="ChartBar">
                                <core:UserControlMenuItem.ListView>
                                    <ListView Margin="0 16 0 16" PreviewMouseLeftButtonUp="ListBox_PreviewMouseLeftButtonUp">
                                        <core:LiveExplorerListBoxItem SampleType="{x:Type samples:BusyIndicator.Views.BusyIndicatorView}" Style="{StaticResource MaterialDesignListBoxItem2}" PreviewMouseDown="LiveExplorerListBoxItem_PreviewMouseDown">
                                            <TextBlock Text="BusyIndicator" Margin="10 5"/>
                                        </core:LiveExplorerListBoxItem>
                                        <core:LiveExplorerListBoxItem SampleType="{x:Type samples:BusyIndicator.Views.BusyIndicatorCustomContentView}" Style="{StaticResource MaterialDesignListBoxItem2}" PreviewMouseDown="LiveExplorerListBoxItem_PreviewMouseDown">
                                            <TextBlock Text="BusyIndicator Custom Content" Margin="10 5"/>
                                        </core:LiveExplorerListBoxItem>
                                        <core:LiveExplorerListBoxItem SampleType="{x:Type samples:BusyIndicator.Views.BusyIndicatorCustomContentTemplateView}" Style="{StaticResource MaterialDesignListBoxItem2}" PreviewMouseDown="LiveExplorerListBoxItem_PreviewMouseDown">
                                            <TextBlock Text="BusyIndicator Custom Content Template" Margin="10 5"/>
                                        </core:LiveExplorerListBoxItem>
                                        <core:LiveExplorerListBoxItem SampleType="{x:Type samples:Calculator.Views.CalculatorView}" Style="{StaticResource MaterialDesignListBoxItem2}" PreviewMouseDown="LiveExplorerListBoxItem_PreviewMouseDown">
                                            <TextBlock Text="Calculator" Margin="10 5"/>
                                        </core:LiveExplorerListBoxItem>
                                        <core:LiveExplorerListBoxItem SampleType="{x:Type samples:Wizard.Views.WizardView}" Style="{StaticResource MaterialDesignListBoxItem2}" PreviewMouseDown="LiveExplorerListBoxItem_PreviewMouseDown">
                                            <TextBlock Text="Wizard" Margin="10 5"/>
                                        </core:LiveExplorerListBoxItem>
                                        <core:LiveExplorerListBoxItem SampleType="{x:Type samples:MultiCalendar.Views.MultiCalendarView}" Style="{StaticResource MaterialDesignListBoxItem2}" PreviewMouseDown="LiveExplorerListBoxItem_PreviewMouseDown">
                                            <TextBlock Text="MultiCalendar" Margin="10 5"/>
                                        </core:LiveExplorerListBoxItem>
                                    </ListView>
                                </core:UserControlMenuItem.ListView>
                            </core:UserControlMenuItem>
                            <core:UserControlMenuItem Header="Others" Icon="FilterList">
                                <core:UserControlMenuItem.ListView>
                                    <ListView Margin="0 16 0 16" PreviewMouseLeftButtonUp="ListBox_PreviewMouseLeftButtonUp">
                                        <core:LiveExplorerListBoxItem SampleType="{x:Type samples:AvalonDock.Views.AvalonDockView}" Style="{StaticResource MaterialDesignListBoxItem2}" PreviewMouseDown="LiveExplorerListBoxItem_PreviewMouseDown">
                                            <TextBlock Text="AvalonDock" Margin="10 5"/>
                                        </core:LiveExplorerListBoxItem>
                                        <core:LiveExplorerListBoxItem SampleType="{x:Type samples:SlideShow.Views.SlideShowView}" Style="{StaticResource MaterialDesignListBoxItem2}" PreviewMouseDown="LiveExplorerListBoxItem_PreviewMouseDown">
                                            <TextBlock Text="SlideShow" Margin="10 5"/>
                                        </core:LiveExplorerListBoxItem>
                                    </ListView>
                                </core:UserControlMenuItem.ListView>
                            </core:UserControlMenuItem>
                        </StackPanel>
                    </ScrollViewer>

LiveExplorerListBoxItem 的实现是一个 ListViewItem，但名称是 ListBox，因为之前是一个 ListBoxItem。

    public class LiveExplorerListBoxItem: ListViewItem
    {
        #region Properties

        #region IsNewFeature

        public static readonly DependencyProperty IsNewFeatureProperty = DependencyProperty.Register("IsNewFeature", typeof(bool), typeof(LiveExplorerListBoxItem), new UIPropertyMetadata(false));
        public bool IsNewFeature
        {
            get
            {
                return (bool)GetValue(IsNewFeatureProperty);
            }
            set
            {
                SetValue(IsNewFeatureProperty, value);
            }
        }

        #endregion //IsNewFeature

        #region IsPlusOnlyFeature

        public static readonly DependencyProperty IsPlusOnlyFeatureProperty = DependencyProperty.Register("IsPlusOnlyFeature", typeof(bool), typeof(LiveExplorerListBoxItem), new UIPropertyMetadata(false));
        public bool IsPlusOnlyFeature
        {
            get
            {
                return (bool)GetValue(IsPlusOnlyFeatureProperty);
            }
            set
            {
                SetValue(IsPlusOnlyFeatureProperty, value);
            }
        }

        #endregion //IsPlusOnlyFeature

        #region SampleType

        public static readonly DependencyProperty SampleTypeProperty = DependencyProperty.Register("SampleType", typeof(Type), typeof(LiveExplorerListBoxItem), new UIPropertyMetadata(null));
        public Type SampleType
        {
            get
            {
                return (Type)GetValue(SampleTypeProperty);
            }
            set
            {
                SetValue(SampleTypeProperty, value);
            }
        }

        #endregion //Sample

        #endregion //Properties

        #region Methods

        protected override void OnMouseLeftButtonDown(System.Windows.Input.MouseButtonEventArgs e)
        {
            //# If the node does not have any sample associated, toggle it's expansion on single click
            if (this.SampleType == null)
            {
                this.IsSelected = !this.IsSelected;
            }
            else
            {
                this.IsSelected = true;
            }
            e.Handled = true;
        }

        #endregion
    }

Answer 1

我找到了，因为我必须将 ScrollViewer 插入到 Grid 中，并且我将它放在 StackPanel 中

ScrollViewer 中的垂直条 (VerticalScrollBar) 不像 WPF 中的 Expander 那样与 UserControl 一起显示 XAML

Vertical Bar in ScrollViewer (VerticalScrollBar) do not show with UserControl like Expander in WPF XAML

wpf

xaml

expander

scrollviewer