我正在尝试实施www.devexpress.com菜单。 但我不知道该怎么做才能实现下面的展开细节。
这是我的源文件。 from Apple
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:MenuTest02"
xmlns:System="clr-namespace:System;assembly=mscorlib" x:Class="MenuTest02.MainWindow"
mc:Ignorable="d"
Title="MainWindow" Height="579.8" Width="1600" WindowState="Maximized">
<Window.Resources>
<Style x:Key="styleTopMenu" TargetType="{x:Type Button}">
<Setter Property="FontFamily" Value="Microsoft JhengHei"/>
<Setter Property="FontSize" Value="18"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="Height" Value="Auto"/>
<Setter Property="Width" Value="Auto"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ContentPresenter Grid.Column="0" Grid.Row="0"
HorizontalAlignment="Center" VerticalAlignment="Center"
x:Name="mnuContent" Margin="0"/>
<Border Grid.Column="1" Grid.Row="0" BorderBrush="Gray"
BorderThickness="0,0,1,0" HorizontalAlignment="Right"
Height="30" VerticalAlignment="Center" Width="1"/>
<!--
<Polyline Name="mnuTriangle" HorizontalAlignment="Center" Grid.ColumnSpan="2" Grid.Column="0" Grid.Row="2" Visibility="Visible"
Points="0,10 10,0 20,10 0,10" Fill="#FF313131"/> -->
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="BlueViolet"/>
<!-- <Setter TargetName="grdProductsSubmenu" Property="Visibility" Value="True"/> -->
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- <GridLength x:Key="GridLength1">1195</GridLength> -->
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition x:Name="grdMainDisplay" Width="1195" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!-- Top border -->
<Border Grid.Row="0" Grid.ColumnSpan="3" Background="#FF4A4A4A" Width="Auto" Height="26"/>
<!-- bottom Line in menu -->
<Border Grid.Row="1" Grid.ColumnSpan="3" Background="Transparent" Width="Auto" Height="1" BorderBrush="Gray" BorderThickness="0,1,0,0" VerticalAlignment="Top" Margin="0,66,0,0"/>
<!-- Top Menu -->
<Grid Grid.Column="1" Grid.Row="1" Height="66" VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="80"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="images\logo.png" HorizontalAlignment="Right" Height="66"/>
<!--
<Border Grid.Column="2" BorderBrush="Gray" BorderThickness="0,0,1,0" HorizontalAlignment="Right" Height="30" VerticalAlignment="Center" Width="1"/>
<TextBlock Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="Black" FontSize="18" Text=" Products " />
-->
<Button Grid.Column="2" Content=" Products " Style="{StaticResource styleTopMenu}"/>
<Button Grid.Column="3" Content=" Free Trials & Demos " Style="{StaticResource styleTopMenu}"/>
<Button Grid.Column="4" Content=" Buy " Style="{StaticResource styleTopMenu}"/>
<Button Grid.Column="5" Content=" Support " Style="{StaticResource styleTopMenu}"/>
<Button Grid.Column="6" Content=" My Account " Style="{StaticResource styleTopMenu}"/>
<Button Grid.Column="7" Content=" About Us " Style="{StaticResource styleTopMenu}"/>
<Image Grid.Column="8" Source="images\cart_blogs_search.jpg" Margin="30,0,0,0" Height="54" HorizontalAlignment="Right"/>
</Grid>
<Grid Grid.Column="1" Grid.Row="1" Margin="0,56,0,0" Height="10" Width="Auto" HorizontalAlignment="Left" VerticalAlignment="Top">
<Polyline x:Name="triProducts" Margin="320,0,0,0" Grid.Column="0" Grid.Row="1" Points="0,10 10,0 20,10 0,10" Fill="#FF313131" Visibility="Hidden"/>
<Polyline Name="triFreeTrials" Margin="480,0,0,0" Grid.Column="0" Grid.Row="1" Points="0,10 10,0 20,10 0,10" Fill="#FF313131" Visibility="Hidden"/>
<Polyline Name="triBuy" Margin="620,0,0,0" Grid.Column="0" Grid.Row="1" Points="0,10 10,0 20,10 0,10" Fill="#FF313131" Visibility="Hidden"/>
<Polyline Name="triSupport" Margin="705,0,0,0" Grid.Column="0" Grid.Row="1" Points="0,10 10,0 20,10 0,10" Fill="#FF313131" Visibility="Hidden"/>
<Polyline Name="triMyAccount" Margin="830,0,0,0" Grid.Column="0" Grid.Row="1" Points="0,10 10,0 20,10 0,10" Fill="#FF313131" Visibility="Hidden"/>
<Polyline Name="triAboutUs" Margin="950,0,0,0" Grid.Column="0" Grid.Row="1" Points="0,10 10,0 20,10 0,10" Fill="#FF313131" Visibility="Hidden"/>
</Grid>
<Grid Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="3" Margin="0,66,0,0" Height="Auto" Visibility="Hidden"
VerticalAlignment="Top" Background="#FF313131" x:Name="grdProductsSubmenu" Panel.ZIndex="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="{Binding ElementName=grdMainDisplay, Path=Width}"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Margin="0,0,0,0" Grid.Column="1" HorizontalAlignment="Left" Orientation="Horizontal" >
<Grid Visibility="Visible">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Row="1" Grid.Column="0" Orientation="Vertical">
<TextBlock Text="Suites" FontSize="18" Foreground="DarkGray"/>
<TextBlock Text="BEST VALUE" Margin="0,10,0,10" FontSize="14" Foreground="Orange"/>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" VerticalAlignment="Top" HorizontalAlignment="Left" Fill="#FFF88E1D" Height="26" Width="26" RadiusX="3" RadiusY="3"/>
<TextBlock Grid.Column="2" Margin="0" Text="Universal" Foreground="White" FontWeight="Bold"/>
<TextBlock Grid.Column="2" Margin="0,20,0,15" Foreground="DarkGray" FontSize="11" TextWrapping="Wrap"><Run Text="(includes all DevExpress.Netl"/><LineBreak/><Run Text="products in one integrated suite)"/></TextBlock>
</Grid>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" VerticalAlignment="Top" HorizontalAlignment="Left" Fill="#FF406EA4" Height="26" Width="26" RadiusX="3" RadiusY="3"/>
<TextBlock Grid.Column="2" Margin="0,0,0,0" Text="Dxperience" Foreground="White" FontWeight="Bold"/>
<TextBlock Grid.Column="2" Margin="0,20,0,0" Foreground="DarkGray" FontSize="11" TextWrapping="Wrap"><Run Text="(includes all DevExpress.Netl"/><LineBreak/><Run Text="Controls along with CodeRush)"/></TextBlock>
</Grid>
<Rectangle VerticalAlignment="Top" HorizontalAlignment="Left" Margin="0,50,0,0"
Fill="#FF4C4C4C" Height="50" Width="230" RadiusX="2" RadiusY="2"/>
<TextBlock Margin="0,-50,0,0" FontSize="14"
Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center">
<Run Text="Compare Features"/><LineBreak/><Run Text="and Pricing"/>
</TextBlock>
</StackPanel>
<Border Grid.Row="1" Grid.Column="1" Grid.RowSpan="4" Height="Auto" Width="20" BorderBrush="Gray" BorderThickness="1,0,0,0" Margin="20,0,0,0"/>
<StackPanel Grid.Row="1" Grid.Column="2" Orientation="Vertical">
<TextBlock Text=".NET Products" FontSize="18" Foreground="DarkGray"/>
<TextBlock Text="INDIVIDUAL PLATFORMS" Margin="0,10,0,0" FontSize="14" Foreground="Orange"/>
<TextBlock Text="WinForms" FontSize="14" Foreground="White"/>
<TextBlock Text="ASP.NET" FontSize="14" Foreground="White"/>
<TextBlock Text="MVC" FontSize="14" Foreground="White"/>
<TextBlock Text="WPF" FontSize="14" Foreground="White"/>
<TextBlock Text="Windows 10 Apps" FontSize="14" Foreground="White"/>
<TextBlock Text="CROSS-PLATFORM" Margin="0,10,0,0" FontSize="14" Foreground="Orange"/>
<TextBlock Text="Reporting" FontSize="14" Foreground="White"/>
<TextBlock Text="Document Automatoin" FontSize="14" Foreground="White"/>
</StackPanel>
<StackPanel Grid.Row="1" Grid.Column="2" Orientation="Vertical" Margin="220,24,0,0">
<TextBlock Text="ENTERPRISE TOOLS" Margin="0,10,0,0" FontSize="14" Foreground="Orange"/>
<TextBlock Text="Report Server" FontSize="14" Foreground="White"/>
<TextBlock Text="Analytics Dashboard" FontSize="14" Foreground="White"/>
<TextBlock Text="FRAMEWORKS" Margin="0,10,0,0" FontSize="14" Foreground="Orange"/>
<TextBlock Text="eXpressApp Framework" FontSize="14" Foreground="White"/>
<TextBlock Text="CODE-DEBUG-REFACTOR" Margin="0,10,0,0" FontSize="14" Foreground="Orange"/>
<TextBlock Text="CodeRush for Visual Studio" FontSize="14" Foreground="White"/>
</StackPanel>
<Border Grid.Row="1" Grid.Column="3" Grid.RowSpan="4" Height="Auto" Width="20" BorderBrush="Gray" BorderThickness="1,0,0,0" Margin="20,0,0,0"/>
<Grid Grid.Row="1" Grid.Column="4">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="30"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="30"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Vertical">
<TextBlock Text="HTML JS Products" FontSize="18" Foreground="DarkGray"/>
<TextBlock Text="HYBRID APPS" Margin="0,10,0,0" FontSize="14" Foreground="Orange"/>
<TextBlock Text="DevExtreme Moboile" FontSize="14" Foreground="White"/>
<TextBlock Text="DevExtreme Web" FontSize="14" Foreground="White"/>
</StackPanel>
<StackPanel Grid.Column="2" Orientation="Vertical">
<TextBlock Text="Xamarin.Forms" FontSize="18" Foreground="DarkGray"/>
<TextBlock Text="UI CONTROLS" Margin="0,10,0,0" FontSize="14" Foreground="Orange"/>
<TextBlock Text="Free Data Grid" FontSize="14" Foreground="White"/>
</StackPanel>
<StackPanel Grid.Row="2" Orientation="Vertical">
<TextBlock Text="iOS" FontSize="18" Foreground="DarkGray"/>
<TextBlock Text="NATIVE" Margin="0,10,0,0" FontSize="14" Foreground="Orange"/>
<TextBlock Text="DataExplorer" FontSize="14" Foreground="White"/>
</StackPanel>
<StackPanel Grid.Row="2" Grid.Column="2" Orientation="Vertical">
<TextBlock Text="Testing Tools" FontSize="18" Foreground="DarkGray"/>
<TextBlock Text="WEB TESTING" Margin="0,10,0,0" FontSize="14" Foreground="Orange"/>
<TextBlock Text="TestCafe" FontSize="14" Foreground="White"/>
</StackPanel>
<StackPanel Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="3" Orientation="Vertical">
<TextBlock Text="Delphi & C++Builder Products" FontSize="18" Foreground="DarkGray"/>
<TextBlock Text="DELPHI & C++BUILDER" Margin="0,10,0,0" FontSize="14" Foreground="Orange"/>
<TextBlock Text="VCL" FontSize="14" Foreground="White"/>
</StackPanel>
</Grid>
</Grid>
</StackPanel>
</Grid>
<!-- Main Display -->
<Grid Grid.Column="1" Grid.Row="1" Height="Auto" Margin="0,66,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="{Binding ElementName=grdMainDisplay, Path=Width}"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="1" Grid.Row="1" HorizontalAlignment="Center">
<Run Text="(includes all DevExpress.Netl"/>
<LineBreak/>
<Run Text="Controls along with CodeRush)"/>
<LineBreak/>
<Run Text="Some Text..."/>
</TextBlock>
<Path Grid.Column="1" Grid.Row="2" HorizontalAlignment="Center" Data="M50.0000011012083,0.5L99.5000021617096,99.5L0.00000040707015,99.5z" Stroke="Black"
StrokeThickness="4" Fill="Yellow"/>
</Grid>
</Grid>
答案 0 :(得分：1)
您可以设置一个包含4个columsn和2个行的网格。
在每个上部单元格中放置一个部分名称
在底行，您将一个面板放入详细信息，设置其属性Grid.ColumnSpan = 4 Grid.Column = 0 grid.row = 1，使其遍布整个部分。 （我认为这部分代码非常好）和visibility=visible opacity=1
然后你勾选每个上部元素的鼠标输入，进入时，你将所有下面板的不透明度设置为0，但是将所需的一个设置为1.
这将显示没有动画的所需面板。当你有它工作时，要实现动画，你需要使用DoubleAnimation并将另一个的opacity属性设置为零而不是仅设置它。
如果您发现遇到特殊问题，请告知我们