正文
WPF 如何自定义一个弹框
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
------------吾亦无他,唯手熟尔，谦卑若愚，好学若饥-------------
简述：
手工以原生Grid的方式，自定义了一个仿弹窗效果，优点可以自定义，缺点需要自己实现以及维护整个弹窗的效果
效果图：
思路：
直接画好页面，控制它的展示消失即可
代码：
1.xaml的弹框，下面的按钮是自定义的样式
<!--确认xlsx的模态框自定义ConfirmedModalBox-->
<Border x:Name="incConfirmedModalBox" Grid.Column="" Margin="-160,-80,30,10" Width="" Height="" BorderBrush="#000" BorderThickness="" Background="White" Visibility="Collapsed">
<!--Margin="6,6,6,6"-->
<Grid Width="" Height="" Background="White" >
<Grid.RowDefinitions>
<RowDefinition Height=""/>
<RowDefinition />
<RowDefinition Height=""/>
</Grid.RowDefinitions>
<Grid Grid.Row="">
<!-- Background="Aqua"-->
<TextBlock Margin="30,15,0,0">请确认</TextBlock>
</Grid>
<Grid Grid.Row="">
<Grid >
<ScrollViewer Margin="30,0,0,0" VerticalScrollBarVisibility="Auto" >
<!--VerticalScrollBarVisibility="Auto"-->
<StackPanel Margin="0,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Stretch" x:Name="incModalStackPane1" >
<!--<Grid Width="" Height="">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="" Margin="0 5">test1.inc</TextBlock>
<TextBlock Grid.Column="" Margin="0 5">-- ::</TextBlock>
</Grid>
<Grid Width="" Height="">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="" Margin="0 5">test1.inc</TextBlock>
<TextBlock Grid.Column="" Margin="0 5">-- ::</TextBlock>
</Grid>-->
</StackPanel>
</ScrollViewer>
</Grid>
</Grid>
<Grid Grid.Row="">
<!-- Background="Aqua"-->
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Grid.Column="" Style="{StaticResource ButtonStyle}" x:Name="incModalConfirm" Content="确定" HorizontalAlignment="Left" Margin="95,15,0,0" VerticalAlignment="Top" Width="" Height="" PreviewMouseLeftButtonUp="incModalConfirm_PreviewMouseLeftButtonUp">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Border BorderBrush="{TemplateBinding Control.BorderBrush}" BorderThickness="" CornerRadius="6,6,6,6" Name="PART_Background">
<Border.Background>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FF006BB9" />
<GradientStop Color="#006AB9" />
</LinearGradientBrush>
</Border.Background>
<ContentPresenter Content="{TemplateBinding ContentControl.Content}" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
</ControlTemplate>
</Button.Template>
</Button>
<Button Grid.Column="" Style="{StaticResource ButtonStyle}" x:Name="incModalCancel" Content="取消" HorizontalAlignment="Left" Margin="30,15,0,0" VerticalAlignment="Top" Width="" Height="" PreviewMouseLeftButtonUp="incModalCancel_PreviewMouseLeftButtonUp">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Border BorderBrush="{TemplateBinding Control.BorderBrush}" BorderThickness="" CornerRadius="6,6,6,6" Name="PART_Background">
<Border.Background>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FF006BB9" />
<GradientStop Color="#006AB9" />
</LinearGradientBrush> </Border.Background>
<ContentPresenter Content="{TemplateBinding ContentControl.Content}" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
</Grid>
</Border>
xaml
2.cs后端的控制
incConfirmedModalBox.Visibility = Visibility.Visible;
3.业务代码就不做展示了，就是把此控件放到xaml末尾，根据Grid布局定位到页面中间，控制它展示隐藏即可，他们确定取消按钮正常调用后台逻辑代码即可，调用完成之后将incConfirmeDModalBox隐藏，维护关联逻辑
备注：
本来这块想要讲很多的，但是涉及到没有准备现成的Demo，之前编写的业务不便公开，草草收尾了，下次重新补上一份
