Example code for a message box that is automatically hidden by WPF _c# Tutorial

(The mouse will always display, move the animation to continue), provide normal and error two border.

Introduction: The traditional determination, cancellation, ok,cancal and so on the dialog box is too cumbersome, as a result of the project needs of the birth of the Imitation Mobile Phone prompts dialog box. Of course, the traditional dialog box project also has, here is not to do the introduction.

The appearance and the exit animation did very simple, uses blend casually to tinker some, will use it.

The preview results are as follows:

The idea is simple:-> the form transparently to the layout and style design-> the background pass value call.

Preparation: References to Microsoft.Expression.Interactions.dll and System.Windows.Interactivity.dll. Blend most of the behavior needs of these 2 DLLs, necessary Ah!

1, transparency of the form, no borders: (Drag and zoom forms in. NET 4.5 you don't have to write your own code anymore, and integrated <WindowChrome/> can implement many features like dragging and scaling forms.) ）

The key settings are as follows:

Allowstransparency= "True" horizontalalignment= "Center" background= "Transparent" xmlns:i= "http:// Schemas.microsoft.com/expression/2010/interactivity "xmlns:ei=" http://schemas.microsoft.com/expression/2010/ Interactions "windowstyle=" None "

2, layout, mainly including initial layout and animation transition in 2 aspects:

Static interface layout:

<grid horizontalalignment= "Center" verticalalignment= "Top" x:name= "Back" > <border padding= "0" x:name= "BR "horizontalalignment=" center "verticalalignment=" Center "> <i:interaction. triggers> <i:eventtrigger eventname= "MouseEnter" > <ei:controlstoryboardaction storyboard= "{S Taticresource SHOWSB} "controlstoryboardoption=" Stop "/> </i:EventTrigger> <i:eventtrigger even Tname= "MouseLeave" > <ei:controlstoryboardaction storyboard= "{StaticResource MouseLeave}"/> < /i:eventtrigger> </i:interaction. triggers> <grid horizontalalignment= "center" verticalalignment= "Center" > <grid horizontalalignme Nt= "Center" verticalalignment= "Center" > <Grid.RowDefinitions> <rowdefinition height= "12" ></RowDefinition> <rowdefinition height= "Auto" ></RowDefinition> <rowdefini tion 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" > <Gr
                Adientstop 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= "V" Isible "opacity=" 1 "grid.rowspan=" 3 "rendertransformorigin=" 0.5,0.5 "borderbrush=" #F35150 "borderthickness=" 1 " cornerradius= "8" > <Border.RenderTransform> <TransformGroup> <s caletransform/> <SkewTransform/> <RotateTransform/> <tra nslatetransform/> </TransformGroup> </Border.RenderTransform> <bor Der. background> <lineargradientbrush endpoint= "1,1" mappingmode= "RelativeToBoundingBox" StartPoint= "0,0" &G
                T
                <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 = "0 0" grid.row= "1" fontsize= "foreground=" #64676d "x:name=" TB "text=" {Binding message,relativesource={ RelativeSource ancestortype=window},fallbackvalue= Failure Information} "textwrapping=" Wrap "minwidth=" "verticalalignment=" Center "horizontalalignment=" center "rendertransformorigin=" 0.5,0.5 "maxwidth=" textalignment= "center"
                fontfamily= "Microsoft Yahei" > <TextBlock.RenderTransform> <TransformGroup>
                <ScaleTransform/> <SkewTransform/> <RotateTransform/> <TranslateTransform/> </TransformGroup> &LT;/TEXTBLOCK.RENDERTRANSFORM&GT;&L t;/textblock> </Grid> </Grid> </Border> </Grid>

Animation control for entry and exit:

<storyboard x:key= "SHOWSB" completed= "storyboard_completed" > <doubleanimationusingkeyframes Storyboard.Ta Rgetproperty= "(uielement.rendertransform). (TransformGroup.Children) [3]. (TRANSLATETRANSFORM.Y) "Storyboard.targetname=" Grid1 "> <easingdoublekeyframe keytime=" 0 "value=" {Binding YOf FSet} "/> <easingdoublekeyframe keytime=" 0:0:0.5 "value=" 0 "/> <easingdoublekeyframe KeyTime=" 0: 0:3 "value=" 0 "/> <easingdoublekeyframe keytime=" 0:0:3.5 "value=" {Binding yoffset} "/> </doubleani Mationusingkeyframes> <doubleanimationusingkeyframes storyboard.targetproperty= "(UIElement.RenderTransform ). (TransformGroup.Children) [3]. (TRANSLATETRANSFORM.Y) "Storyboard.targetname=" Grid2 "> <easingdoublekeyframe keytime=" 0 "value=" {Binding YOf FSet} "/> <easingdoublekeyframe keytime=" 0:0:0.5 "value=" 0 "/> <easingdoublekeyframe KeyTime=" 0: 0:3 "value=" 0 "/> <easingdoublekeyfrAme keytime= "0:0:3.5" value= "{Binding yoffset}"/> </DoubleAnimationUsingKeyFrames> <doubleanimatio Nusingkeyframes storyboard.targetproperty= "(uielement.rendertransform). (TransformGroup.Children) [3]. (TRANSLATETRANSFORM.Y) "storyboard.targetname=" TB "> <easingdoublekeyframe keytime=" 0 "value=" {Binding YOffSe T} "/> <easingdoublekeyframe keytime=" 0:0:0.5 "value=" "0"/> <easingdoublekeyframe KeyTime= "0:0:3 "value=" 0 "/> <easingdoublekeyframe keytime=" 0:0:3.5 "value=" {Binding yoffset} "/>
      ionusingkeyframes> </Storyboard> <storyboard x:key= "MouseLeave" completed= "storyboard_completed" > <doubleanimationusingkeyframes storyboard.targetproperty= "(uielement.opacity)" Storyboard.TargetName= "Grid1"
      > <easingdoublekeyframe keytime= "0:0:0.5" value= "0"/> </DoubleAnimationUsingKeyFrames> <doubleanimationusingkeyframes Storyboard.targetProperty= "(uielement.opacity)" Storyboard.targetname= "Grid2" > <easingdoublekeyframe keytime= "0:0:0.5" Value= "0"/> </DoubleAnimationUsingKeyFrames> <doubleanimationusingkeyframes storyboard.targetproperty= "(
      uielement.opacity) "Storyboard.targetname=" TB > <easingdoublekeyframe keytime= "0:0:0.5" Value= "0"/> </DoubleAnimationUsingKeyFrames> <doubleanimationusingkeyframes storyboard.targetproperty= "( Uielement.rendertransform). (TransformGroup.Children) [3]. (TRANSLATETRANSFORM.Y) "Storyboard.targetname=" Grid1 "> <easingdoublekeyframe keytime=" 0:0:0.5 "Value=" {Bindi ng Yoffset} "/> </DoubleAnimationUsingKeyFrames> <doubleanimationusingkeyframes STORYBOARD.TARGETPR Operty= "(uielement.rendertransform). (TransformGroup.Children) [3]. (TRANSLATETRANSFORM.Y) "Storyboard.targetname=" Grid2 "> <easingdoublekeyframe keytime=" 0:0:0.5 "Value=" {Bindi ng Yoffset} "/> </doubleanimAtionusingkeyframes> <doubleanimationusingkeyframes storyboard.targetproperty= "(UIElement.RenderTransform) . (TransformGroup.Children) [3]. (TRANSLATETRANSFORM.Y) "storyboard.targetname=" TB "> <easingdoublekeyframe keytime=" 0:0:0.5 "Value=" {Binding Yoffset} "/> </DoubleAnimationUsingKeyFrames> </Storyboard>

Note: The code to stop the animation and quickly disappear after moving the mouse is:

<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>

Background code logic:

private bool IsError = false;
public void Show (string messageboxtext, bool IsError = False)
{
this.iserror = IsError;
This. message = Messageboxtext;
This. Show ();
}
Public Onlyshowmessagebox ()
{
InitializeComponent ();
This. DataContext = new Model () {yoffset = -300d};
This. Loaded + = (y, k) =>
{this
. top = A;
This. left = (SystemParameters.WorkArea.Width)/2-this. ACTUALWIDTH/2;
if (IsError)
{
this.grid.Visibility = visibility.collapsed;
}
else {this.grid.Visibility = visibility.collapsed;}
(This. resources["SHOWSB"] as Storyboard). Begin ();}
;
}
private void Storyboard_completed (object sender, EventArgs e)
{this
. Close ();

which

public class Model:modelbase
{
private double yoffset;
Public double yoffset
{get
{return yoffset;}
Set
{
yoffset = value;
Raisepropertychangedevent ("Yoffset");
}

The modelbase is described in a grouped selection box control (MVVM) (Toggle style imitation Radio box radiobutton, CheckBox checkbox function).

Finally, call the method:

New Onlyshowmessagebox (). Show ("Please note: High energy ahead, no entry!") ", false);

Or

New Onlyshowmessagebox (). Show ("No such object exists!") ", true);

The above is a small set to introduce the WPF automatic hidden message box of all the narration, I hope to help you, if you want to learn more content please pay attention to cloud habitat community!