用的是dev的TileLayouotControl控件。
<dxwui:PageAdornerControl Header="" Padding="30" ShowBackButton="False" > <WrapPanel> <dxlc:TileLayoutControl Padding="12,0,10,10"> <dxlc:Tile Header="重绕" Style="{StaticResource VerticalTile}" Background="#FF00ABDC" dxwuin:Navigation.NavigateTo="ICMORpt"> <BitmapImage UriSource="/Images/UserManagment.png" /> </dxlc:Tile> <!--dxlc:FlowLayoutControl.IsFlowBreak="True"--> <dxlc:Tile Header="装箱" Style="{StaticResource VerticalTile}" Background="#FF6652A2" dxwuin:Navigation.NavigateTo="Package"> <BitmapImage UriSource="/Images/Statistics.png" /> </dxlc:Tile> <dxlc:Tile Header="装托" Style="{StaticResource HorizontalTile}" Background="#FFDA8515" dxwuin:Navigation.NavigateTo="Pallet"> <BitmapImage UriSource="/Images/ZillowLogo.png" /> </dxlc:Tile> <dxmvvm:Interaction.Behaviors> <dxwuin:FrameDocumentUIService ShowSplashScreen="True" > <dxwuin:FrameDocumentUIService.SplashScreenService> <dx:DXSplashScreenService x:Name="WaitScreenService" ViewTemplate="{StaticResource waitIndicator}" SplashScreenStartupLocation="CenterOwner" /> </dxwuin:FrameDocumentUIService.SplashScreenService> </dxwuin:FrameDocumentUIService> </dxmvvm:Interaction.Behaviors> </dxlc:TileLayoutControl> <dxlc:TileLayoutControl Padding="12,0,10,10"> <dxlc:Tile Header="补打外箱标签" Style="{StaticResource VerticalTile}" Background="#FF00ABDC" dxwuin:Navigation.NavigateTo="RePackagePrint"> <BitmapImage UriSource="/Images/UserManagment.png" /> </dxlc:Tile> <dxmvvm:Interaction.Behaviors> <dxwuin:FrameDocumentUIService ShowSplashScreen="True" > <dxwuin:FrameDocumentUIService.SplashScreenService> <dx:DXSplashScreenService x:Name="WaitScreenService1" ViewTemplate="{StaticResource waitIndicator}" SplashScreenStartupLocation="CenterOwner" /> </dxwuin:FrameDocumentUIService.SplashScreenService> </dxwuin:FrameDocumentUIService> </dxmvvm:Interaction.Behaviors> </dxlc:TileLayoutControl> </WrapPanel> </dxwui:PageAdornerControl>
样式
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<UserControl.Resources> <DataTemplate x:Key="waitIndicator"> <dx:WaitIndicator DeferedVisibility="True"/> </DataTemplate> <converter:BatmapConverter x:Key="bitmapConverter"/> <converter:ModuleAuthVisibleConverter x:Key="moduleAuthConverter"/> <Style x:Key="VerticalTile" TargetType="{x:Type dxlc:Tile}"> <Setter Property="VerticalContentAlignment" Value="Center" /> <Setter Property="HorizontalContentAlignment" Value="Center" /> <Setter Property="Size" Value="Small" /> <Setter Property="HeaderTemplate"> <Setter.Value> <DataTemplate /> </Setter.Value> </Setter> <Setter Property="ContentTemplate"> <Setter.Value> <DataTemplate > <StackPanel> <dxe:ImageEdit IsReadOnly="True" Stretch="Fill" EditValue="{Binding Mode=OneWay}" ShowBorder="False" Width="80" Height="80"/> <TextBlock Text="{Binding Header, RelativeSource={RelativeSource AncestorType={x:Type dxlc:Tile}}}" FontSize="24" Margin="0,5,0,0" HorizontalAlignment="Center" FontFamily="宋体" /> </StackPanel> </DataTemplate> </Setter.Value> </Setter> </Style> <Style x:Key="HorizontalTile" TargetType="{x:Type dxlc:Tile}"> <Setter Property="VerticalContentAlignment" Value="Center" /> <Setter Property="HorizontalContentAlignment" Value="Center" /> <Setter Property="Size" Value="Large" /> <Setter Property="HeaderTemplate"> <Setter.Value> <DataTemplate /> </Setter.Value> </Setter> <Setter Property="ContentTemplate"> <Setter.Value> <DataTemplate> <StackPanel Orientation="Horizontal"> <dxe:ImageEdit IsReadOnly="True" EditValue="{Binding Mode=OneWay}" Stretch="Fill" ShowBorder="False" Width="80" Height="80"/> <TextBlock Text="{Binding Header, RelativeSource={RelativeSource AncestorType={x:Type dxlc:Tile}}}" FontSize="24" Margin="20,0,0,0" VerticalAlignment="Center" /> </StackPanel> </DataTemplate> </Setter.Value> </Setter> </Style> <Style x:Key="FlatTile" TargetType="{x:Type dxlc:Tile}"> <Setter Property="Size" Value="Large" /> <Setter Property="Padding" Value="5" /> <Setter Property="VerticalHeaderAlignment" Value="Stretch" /> </Style> <help:Timer x:Key="time"/> <DataTemplate x:Key="layoutItemTemplate"> <dxlc:Tile Header="{Binding FNAME}" Style="{StaticResource VerticalTile}" Background="#FFA89BB6" dxwuin:Navigation.NavigateTo="CompleteReportView" dxwuin:Navigation.NavigationParameter="{Binding}" > <BitmapImage UriSource="/MESClient;component/Images/list.png" /> </dxlc:Tile> </DataTemplate> <Style TargetType="dxwui:PageAdornerControl"> <Setter Property="Padding" Value="0,-32,0,0" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="dxwui:PageAdornerControl"> <Border Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}"> <!--<Grid Margin="42,0,32,10">--> <Grid > <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <Grid> <dxwuii:NavigationHeaderControl Margin="10,2,0,2" VerticalAlignment="Top" x:Name="PART_NavigationHeader" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" BackCommand="{TemplateBinding BackCommand}" ShowBackButton="{TemplateBinding ShowBackButton}" /> </Grid> <ContentPresenter Grid.Row="1" Margin="{TemplateBinding Padding}" /> </Grid> </Border> </ControlTemplate> </Setter.Value> </Setter> <Setter Property="HeaderTemplate"> <Setter.Value> <DataTemplate> <StackPanel Orientation="Horizontal"> <!--<TextBlock IsHitTestVisible="False" Text="返回" Foreground="#FFF78A09" FontSize="24" FontFamily="Segoe UI Light, Tahoma Light" />--> <TextBlock IsHitTestVisible="False" Margin="20,0,0,0" Text="{Binding}" Foreground="#FFFFFFFF" FontSize="24" FontFamily="Segoe UI Light, Tahoma Light" /> </StackPanel> </DataTemplate> </Setter.Value> </Setter> </Style> </UserControl.Resources>