silverlight 侧边栏折叠菜单

最新推荐文章于 2024-03-25 19:29:32 发布

最新推荐文章于 2024-03-25 19:29:32 发布 · 281 阅读

本文介绍了一个自定义的WPF Splitter控件，该控件能够通过点击按钮来展开和折叠左侧导航面板，并调整右侧内容面板的宽度。文章详细展示了控件的XAML布局代码及后台C#代码实现，包括如何响应Splitter按钮点击事件，以及如何初始化Splitter的大小。

xaml文件

        <!-- splitter控件 -->
        <StackPanel x:Name="SplitterStackPanel" Style="{StaticResource SplitterStackPanelStyle}"
                        Loaded="SplitterStackPanel_Loaded" SizeChanged="SplitterStackPanel_SizeChanged">

            <!-- Left -->
            <Grid Style="{StaticResource SplitterC1GridStyle}">
                <!-- TODO -->
                <Button x:Name="Btn_Test" Content="btn" Click="Button_Click" 
                        Margin="20,6,0,0" Height="25" 
                        VerticalAlignment="Top" HorizontalAlignment="Left" Width="130" />
            </Grid>

            <!-- Split -->
            <StackPanel Style="{StaticResource SplitterC2StackPanelStyle}">
                <HyperlinkButton Name="Btn_Splitter" Click="Btn_Splitter_Click"
                                 IsTabStop="False" VerticalAlignment="Center" Padding="0">
                    <Image Name="SplitIcon" Height="35" Width="7" />
                </HyperlinkButton>
            </StackPanel>

            <!-- Right -->
            <Grid Style="{StaticResource SplitterC3GridStyle}">
                <!-- TODO -->
                <navigation:Frame x:Name="ChildContentFrame" />
            </Grid>
        </StackPanel>

后台代码：

        private void Btn_Splitter_Click(object sender, RoutedEventArgs e)
        {
            double ContainerWidth = SplitterStackPanel.ActualWidth;

            Grid NavPanel = SplitterStackPanel.Children[0] as Grid;
            StackPanel SplitPanel = SplitterStackPanel.Children[1] as StackPanel;
            Grid ContentPanel = SplitterStackPanel.Children[2] as Grid;

            if (NavPanel.Visibility.Equals(Visibility.Collapsed))
            {
                NavPanel.Visibility = Visibility.Visible;
                ContentPanel.Width = ContainerWidth - SplitPanel.ActualWidth - NavPanel.ActualWidth;
                SplitIcon.Source = new BitmapImage(new Uri("/CQDSCC;component/Images/mini-left.png", UriKind.Relative));
            }
            else
            {
                NavPanel.Visibility = Visibility.Collapsed;
                ContentPanel.Width = ContainerWidth - SplitPanel.ActualWidth;
                SplitIcon.Source = new BitmapImage(new Uri("/CQDSCC;component/Images/mini-right.png", UriKind.Relative));
            }
            SplitPanel.Height = SplitterStackPanel.ActualHeight;
        }

        private void SplitterStackPanel_Loaded(object sender, RoutedEventArgs e)
        {
            InitialSplitterSize();
        }

        DateTime oldTime = DateTime.MinValue;

        private void SplitterStackPanel_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            TimeSpan sjc = DateTime.Now.Subtract(oldTime);
            if (sjc.TotalSeconds > 1)
            {
                InitialSplitterSize();
                oldTime = DateTime.Now;
            }
        }

        private void InitialSplitterSize()
        {
            double ContainerWidth = SplitterStackPanel.ActualWidth;

            Grid NavPanel = SplitterStackPanel.Children[0] as Grid;
            StackPanel SplitPanel = SplitterStackPanel.Children[1] as StackPanel;
            Grid ContentPanel = SplitterStackPanel.Children[2] as Grid;

            if (NavPanel.Visibility.Equals(Visibility.Collapsed))
            {
                ContentPanel.Width = ContainerWidth - SplitPanel.ActualWidth;
                SplitIcon.Source = new BitmapImage(new Uri("/CQDSCC;component/Images/mini-right.png", UriKind.Relative));
            }
            else
            {
                ContentPanel.Width = ContainerWidth - SplitPanel.ActualWidth - NavPanel.ActualWidth;
                SplitIcon.Source = new BitmapImage(new Uri("/CQDSCC;component/Images/mini-left.png", UriKind.Relative));
            }
            SplitPanel.Height = SplitterStackPanel.ActualHeight;
        }

样式文件：

    <!-- Splitter StackPanel-->
    <Style x:Key="SplitterStackPanelStyle" TargetType="StackPanel">
        <Setter Property="Orientation" Value="Horizontal" />
    </Style>
    <Style x:Key="SplitterC1GridStyle" TargetType="Grid">
        <Setter Property="Width" Value="200" />
        <Setter Property="HorizontalAlignment" Value="Left" />
    </Style>
    <Style x:Key="SplitterC2StackPanelStyle" TargetType="StackPanel">
        <Setter Property="VerticalAlignment" Value="Center" />
        <Setter Property="Orientation" Value="Horizontal" />
        <Setter Property="Width" Value="6" />
        <Setter Property="Background" Value="#ffe2e2e2" />
    </Style>
    <Style x:Key="SplitterC3GridStyle" TargetType="Grid">
        <Setter Property="VerticalAlignment" Value="Stretch" />
        <Setter Property="HorizontalAlignment" Value="Stretch" />
    </Style>