菜单栏自动隐藏

深海之蓝 2010-02-01 11:08:48

制作一个silverlight程序，是左右结构的，左边是一个菜单栏，右边是内容，问题是
想通过类似于gridsplitter控件但是不需要拖拽，而是点击gridsplitter边框隐藏左边的菜单栏（最好有动画效果），右边内容栏对应放大
请问这样的功能该如何实现？

...全文

270 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

深海之蓝 2010-02-09

打赏
举报

恩可以的多谢

jv9 2010-02-08

打赏
举报

使用DockPanel可以实现，很简单的。使用storyboard进行宽度控制，就可以实现动画效果。

例如，定义一个Dockpanel





<Grid ControlsToolKit:DockPanel.Dock="Right" Width="0" x:Name="menuContent" Visibility="Visible"  Margin="1,5,0,3" >

                <Border x:Name="MainMenuPanelHolder" Background="White" BorderBrush="#99bbe8" BorderThickness="1">

                    <Grid>

                        <Grid.RowDefinitions>

                            <RowDefinition Height="Auto"></RowDefinition>

                            <RowDefinition Height="Auto"></RowDefinition>

                            <RowDefinition Height="*"></RowDefinition>

                        </Grid.RowDefinitions>

                        <Grid x:Name="grid" Height="26" Grid.Row="0">

                        	<Grid.Background>

                        		<LinearGradientBrush EndPoint="0.5,-1" StartPoint="0.5,1.5">

                        			<GradientStop Color="#FFB0D5F4" Offset="0"/>

                        			<GradientStop Color="White" Offset="0.5"/>

                        		</LinearGradientBrush>

                        	</Grid.Background>

                            <Image Source="Images/Menu.png" HorizontalAlignment="Left" Stretch="None" Margin="3"></Image>

                            <TextBlock Margin="30,6,0,6" FontSize="12">Menu Panel</TextBlock>

                            <Image x:Name="expand" Source="Images/leftHide_icon.png" Stretch="None" Margin="3" HorizontalAlignment="Right" Opacity="0"></Image>

                            <Image x:Name="collapse" Source="Images/leftShow_icon.png" Stretch="None" Margin="3" HorizontalAlignment="Right" Opacity="1" Cursor="Hand" MouseLeftButtonUp="collapse_MouseLeftButtonUp"></Image>

                        </Grid>



                        <Grid Grid.Row="2" Background="White" x:Name="leftMenuPanel" >

                            <Local:Menu x:Name="Menu"/>

                        </Grid>

                    </Grid>

                </Border>

            </Grid>

然后在资源文件中定义动画效果：





<UserControl.Resources>

        

        <Storyboard x:Name="hideMenu">

            <DoubleAnimation Storyboard.TargetName="menuContent" Storyboard.TargetProperty="Width" To="0" Duration="0:0:0.3"></DoubleAnimation>   

        </Storyboard>

        <Storyboard x:Name="showMenu">

            <DoubleAnimation Storyboard.TargetName="menuContent" Storyboard.TargetProperty="Width" To="180" Duration="0:0:0.3"></DoubleAnimation>

        

    </UserControl.Resources>

使用上面代码就可以实现。

深海之蓝 2010-02-03