WPF 如何自定義一個彈框

 

------------吾亦無他,唯手熟爾，謙卑若愚，好學若飢-------------

 

簡述：

　　手工以原生Grid的方式，自定義了一個仿彈窗效果，優點可以自定義，缺點需要自己實現以及維護整個彈窗的效果 

效果圖：

　　

思路：

　　直接畫好頁面，控制它的展示消失即可

代碼：

　　1.xaml的彈框，下面的按鈕是自定義的樣式

<!--確認xlsx的模態框自定義ConfirmedModalBox-->
        <Border x:Name="incConfirmedModalBox"  Grid.Column="1" Margin="-160,-80,30,10"  Width="430" Height="500"  BorderBrush="#000" BorderThickness="1" Background="White" Visibility="Collapsed">
            <!--Margin="6,6,6,6"-->
            <Grid Width="430" Height="500" Background="White" >
                <Grid.RowDefinitions>
                    <RowDefinition Height="40"/>
                    <RowDefinition />
                    <RowDefinition Height="70"/>
                </Grid.RowDefinitions>
                <Grid Grid.Row="0">
                    <!-- Background="Aqua"-->
                    <TextBlock Margin="30,15,0,0">請確認</TextBlock>
                </Grid>
                <Grid Grid.Row="1">
                    <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="400" Height="22">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*"></ColumnDefinition>
                                        <ColumnDefinition Width="*"></ColumnDefinition>
                                    </Grid.ColumnDefinitions>
                                    <TextBlock Grid.Column="0" Margin="0 5">test1.inc</TextBlock>
                                    <TextBlock Grid.Column="1"  Margin="0 5">2018-08-11 23:11:13</TextBlock>
                                </Grid>
                                <Grid Width="400" Height="22">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*"></ColumnDefinition>
                                        <ColumnDefinition Width="*"></ColumnDefinition>
                                    </Grid.ColumnDefinitions>
                                    <TextBlock Grid.Column="0" Margin="0 5">test1.inc</TextBlock>
                                    <TextBlock Grid.Column="1" Margin="0 5">2018-08-11 23:11:13</TextBlock>
                                </Grid>-->
                            </StackPanel>
                        </ScrollViewer>
                    </Grid>
                </Grid>
                <Grid Grid.Row="2">
                    <!-- Background="Aqua"-->
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"></ColumnDefinition>
                        <ColumnDefinition Width="*"></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <Button Grid.Column="0" Style="{StaticResource ButtonStyle}" x:Name="incModalConfirm"  Content="確定" HorizontalAlignment="Left" Margin="95,15,0,0" VerticalAlignment="Top"  Width="90" Height="26"  PreviewMouseLeftButtonUp="incModalConfirm_PreviewMouseLeftButtonUp">
                        <Button.Template>
                            <ControlTemplate TargetType="{x:Type Button}">
                                <Border BorderBrush="{TemplateBinding Control.BorderBrush}" BorderThickness="0" 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="1"  Style="{StaticResource ButtonStyle}" x:Name="incModalCancel"  Content="取消" HorizontalAlignment="Left" Margin="30,15,0,0" VerticalAlignment="Top"  Width="90" Height="26"  PreviewMouseLeftButtonUp="incModalCancel_PreviewMouseLeftButtonUp">
                        <Button.Template>
                            <ControlTemplate TargetType="{x:Type Button}">
                                <Border BorderBrush="{TemplateBinding Control.BorderBrush}" BorderThickness="0" 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>

 　　2.cs后端的控制

 incConfirmedModalBox.Visibility = Visibility.Visible;

　　3.業務代碼就不做展示了，就是把此控件放到xaml末尾，根據Grid布局定位到頁面中間，控制它展示隱藏即可，他們確定取消按鈕正常調用后台邏輯代碼即可，調用完成之后將incConfirmeDModalBox隱藏，維護關聯邏輯

 

 

 

備注：

　　本來這塊想要講很多的，但是涉及到沒有准備現成的Demo，之前編寫的業務不便公開，草草收尾了，下次重新補上一份