WPF自动隐藏的消息框的实例代码

2019-12-30 13:25:31王冬梅

(鼠标放上去将一直显示,移开动画继续),提供normal和error两种边框。

介绍:传统的确定,取消,OK,CANCAL之类的对话框太繁琐了,由于项目需要而诞生的仿手机式提示对话框。当然传统的对话框项目中也有,这里就不做介绍了。

出场和退场动画做得很简单,就用Blend随便鼓捣了一番,将就用吧。

预览效果如下:

wpf消息框

思路其实很简单:将窗体透明化->布局和样式设计->后台传值调用。

准备工作:Microsoft.Expression.Interactions.dll和System.Windows.Interactivity.dll的引用。Blend中大多数行为需要需要这2个dll,必备啊!

1,将窗体透明化,无边框化:(在.net 4.5中 拖动和缩放窗体再也不用自己写代码了,集成的 <WindowChrome/>就可以实现拖动缩放窗体等诸多功能。)

关键设置如下:


AllowsTransparency="True" HorizontalAlignment="Center" Background="Transparent" xmlns:i="http://www.easck.com/expression/2010/interactivity" xmlns:ei="http://www.easck.com/expression/2010/interactions" WindowStyle="None"

2,布局,主要包括初始布局和动画过渡2个方面:

静态界面布局:


<Grid  HorizontalAlignment="Center" VerticalAlignment="Top" x:Name="back">
    <Border Padding="38 0" x:Name="br" HorizontalAlignment="Center" VerticalAlignment="Center">
      <i:Interaction.Triggers>
        <i:EventTrigger EventName="MouseEnter">
          <ei:ControlStoryboardAction Storyboard="{StaticResource ShowSb}" ControlStoryboardOption="Stop"/>
        </i:EventTrigger>
        <i:EventTrigger EventName="MouseLeave">
          <ei:ControlStoryboardAction Storyboard="{StaticResource MouseLeave}"/>
        </i:EventTrigger>
      </i:Interaction.Triggers>
      <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
        <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
          <Grid.RowDefinitions>
            <RowDefinition Height="12"></RowDefinition>
            <RowDefinition Height="auto"></RowDefinition>
            <RowDefinition Height="12"></RowDefinition>
          </Grid.RowDefinitions>
          <Border Visibility="Visible" x:Name="grid1" Grid.RowSpan="3" RenderTransformOrigin="0.5,0.5" BorderBrush="#00A0E9" BorderThickness="1" CornerRadius="8">
            <Border.RenderTransform>
              <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform/>
                <TranslateTransform/>
              </TransformGroup>
            </Border.RenderTransform>
            <Border.Background>
              <LinearGradientBrush EndPoint="1,1" MappingMode="RelativeToBoundingBox" StartPoint="0,0">
                <GradientStop Color="#EFF0F2" Offset="0.75"/>
                <GradientStop Color="#EFF0F2" Offset="0.25"/>
                <GradientStop Color="#EFF0F2" Offset="1"/>
                <GradientStop Color="#EFF0F2"/>
              </LinearGradientBrush>
            </Border.Background>
          </Border>
          <Border x:Name="grid2" Visibility="Visible" Opacity="1" Grid.RowSpan="3" RenderTransformOrigin="0.5,0.5" BorderBrush="#F35150" BorderThickness="1" CornerRadius="8">
            <Border.RenderTransform>
              <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform/>
                <TranslateTransform/>
              </TransformGroup>
            </Border.RenderTransform>
            <Border.Background>
              <LinearGradientBrush EndPoint="1,1" MappingMode="RelativeToBoundingBox" StartPoint="0,0">
                <GradientStop Color="#EFF0F2" Offset="0.75"/>
                <GradientStop Color="#EFF0F2" Offset="0.25"/>
                <GradientStop Color="#EFF0F2" Offset="1"/>
                <GradientStop Color="#EFF0F2"/>
              </LinearGradientBrush>
            </Border.Background>
          </Border>
          <TextBlock  Margin="38 0 38 0" Grid.Row="1" FontSize="16" Foreground="#64676d" x:Name="tb" Text="{Binding Message,RelativeSource={RelativeSource AncestorType=Window},FallbackValue=失败信息}" TextWrapping="Wrap" MinWidth="200" VerticalAlignment="Center" HorizontalAlignment="Center" RenderTransformOrigin="0.5,0.5" MaxWidth="600" TextAlignment="Center" FontFamily="Microsoft YaHei">
            <TextBlock.RenderTransform>
              <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform/>
                <TranslateTransform/>
              </TransformGroup>
            </TextBlock.RenderTransform></TextBlock>
        </Grid>
      </Grid>
    </Border>
  </Grid>