FT479/WPFWCSDemo/Views/DevicesNavigationView.xaml

<Page x:Class="WPFWCSDemo.Views.DevicesNavigationView"
      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:md="http://materialdesigninxaml.net/winfx/xaml/themes"
      xmlns:local="clr-namespace:WPFWCSDemo.Views"
      mc:Ignorable="d" 
      d:DesignHeight="850" d:DesignWidth="1600"
      Title="DevicesNavigationView">

    <Page.Resources>
        <!--导航按钮的背景样式-->
        <Style TargetType="Button" BasedOn="{StaticResource MaterialDesignRaisedButton}">
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="Margin" Value="5"/>
            <Setter Property="md:ButtonAssist.CornerRadius" Value="5"/>
            <Setter Property="md:ShadowAssist.ShadowDepth" Value="Depth3"/>
            <!--<Setter Property="Height" Value="{Binding ElementName=deviceNavigationHalfGrid,Path=ActualHeight}"/>-->
            <!--缩放起始点-->
            <Setter Property="RenderTransformOrigin" Value="0.5, 0.5"/>
            <!--缩放比例-->
            <Setter Property="RenderTransform">
                <Setter.Value>
                    <ScaleTransform ScaleX="1" ScaleY="1"/>
                </Setter.Value>
            </Setter>
            <!--鼠标悬停缩放事件-->
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Panel.ZIndex" Value="1"/>
                    <Trigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" To="1.05" Duration="0:0:0.1"/>
                                <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" To="1.05" Duration="0:0:0.1"/>
                                <!--<DoubleAnimation Storyboard.TargetProperty="Opacity" To="0.9" Duration="0:0:0.1"/>-->
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.EnterActions>
                    <Trigger.ExitActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" To="1" Duration="0:0:0.1"/>
                                <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" To="1" Duration="0:0:0.1"/>
                                <!--<DoubleAnimation Storyboard.TargetProperty="Opacity" To="0.8" Duration="0:0:0.1"/>-->
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.ExitActions>
                </Trigger>
                <!--鼠标按下--><!--
                <EventTrigger RoutedEvent="UIElement.MouseLeftButtonDown">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                --><!-- 定义鼠标点击时的动画效果 --><!--
                                <DoubleAnimation Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.01" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
                --><!--鼠标放开--><!--
                <EventTrigger RoutedEvent="UIElement.MouseLeftButtonUp">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                --><!-- 定义鼠标点击时的动画效果 --><!--
                                <DoubleAnimation Storyboard.TargetProperty="Opacity" To="0.9" Duration="0:0:0.01" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>-->
            </Style.Triggers>
        </Style>
        <!--按钮文本元素样式-->
        <Style x:Key="btnNavigationText" TargetType="TextBlock">
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="FontSize" Value="40"/>
            <Setter Property="FontWeight" Value="Bold"/>
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="Margin" Value="0,10,0,10"/>
        </Style>
        <!--按钮图像元素样式-->
        <Style x:Key="btnNavigationImage" TargetType="Image">
            <Setter Property="Stretch" Value="None"/>
            <Setter Property="RenderTransform">
                <Setter.Value>
                    <ScaleTransform ScaleX="1" ScaleY="1"/>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>

    
    <Grid>
        <!--背景图-->
        <Image Source="\Resources\仓储系统.jpg" Panel.ZIndex="0" Opacity=".5" Stretch="Fill">
            <Image.Effect>
                <BlurEffect Radius="40"/>
            </Image.Effect>
            
        </Image>

        <!--按钮布局-->
        <Grid x:Name="deviceNavigationGrid" Margin="200,120">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition x:Name="deviceNavigationHalfGrid" Height="*"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>

                <!--设备列表Style="{StaticResource devicesButton}"-->
                <Button x:Name="deviceMain" Grid.RowSpan="2" Background="#673AB7" Command="{Binding OpenDevicePageCommand}" Height="{Binding ElementName=deviceNavigationGrid,Path=Height}">
                    <StackPanel VerticalAlignment="Center">
                        <Image Source="\Resources\齿轮.png" Stretch="None" Style="{StaticResource btnNavigationImage}"/>
                        <TextBlock Text="设备列表" Margin="0,50" Style="{StaticResource btnNavigationText}"/>
                    </StackPanel>
                </Button>
                <!--堆垛机-->
                <Button Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2" Background="#f58220" Command="{Binding OpenStackerPageCommand}" Height="{Binding ElementName=deviceNavigationHalfGrid,Path=Height}">
                    <StackPanel VerticalAlignment="Center">
                        <Image Source="\Resources\无底堆垛机.png" Style="{StaticResource btnNavigationImage}"/>
                        <TextBlock Text="堆垛机" Style="{StaticResource btnNavigationText}"/>
                    </StackPanel>
                </Button>
                <!--提升机-->
                <Button Grid.Row="1" Grid.Column="1" Background="#1d953f" Command="{Binding OpenLiftPageCommand}" Height="{Binding ElementName=deviceNavigationHalfGrid,Path=Height}">
                    <StackPanel VerticalAlignment="Center">
                        <Image Source="\Resources\升降.png" Style="{StaticResource btnNavigationImage}"/>
                        <TextBlock Text="提升机" Style="{StaticResource btnNavigationText}" Margin="0,0,0,30"/>
                    </StackPanel>
                </Button>
                <!--RGV-->
                <Button Grid.Row="1" Grid.Column="2" Background="#7a1723" Command="{Binding OpenRGVPageCommand}" Height="{Binding ElementName=deviceNavigationHalfGrid,Path=Height}">
                    <StackPanel VerticalAlignment="Center">
                        <Image Source="\Resources\RGV.png" Style="{StaticResource btnNavigationImage}"/>
                        <TextBlock Text="穿梭车" Style="{StaticResource btnNavigationText}" Margin="0,0,0,30"/>
                    </StackPanel>
                </Button>
                <!--输送机-->
                <Button Grid.RowSpan="2" Grid.Column="3" Background="#2F50A0" Command="{Binding OpenConvPageCommand}" Height="{Binding ElementName=deviceNavigationHalfGrid,Path=Height}">
                    <StackPanel VerticalAlignment="Center">
                        <Image Source="\Resources\输送机.png" Style="{StaticResource btnNavigationImage}"/>
                        <TextBlock Text="输送机" Margin="0,50" Style="{StaticResource btnNavigationText}"/>
                    </StackPanel>
                </Button>
                <!--2#输送机-->
                <!--<Button Grid.Row="1" Grid.Column="3" Background="#00a6ac" Height="{Binding ElementName=deviceNavigationHalfGrid,Path=Height}">
                    <StackPanel VerticalAlignment="Center">
                        <Image Source="\Resources\输送机.png" Style="{StaticResource btnNavigationImage}"/>
                        <TextBlock Text="2#输送机" Style="{StaticResource btnNavigationText}"/>
                    </StackPanel>
                </Button>-->


            </Grid>

        </Grid>
    </Grid>

</Page>