WPF —— Border、Frame控件详解

一：Border控件

1.Border介绍

 Border（边框）是一个装饰的控件，此控件绘制一个边框、一个背景。用border标签包括目标标签。 不能有多个子元素，要想有多个子元素，多个子元素放在一个父元素下。或者放到grid标签下 

2.Border 常用的属性

Background：填充 Border 边界之间的区域或者说是绘制该区域的背景。

BorderBrush：用于绘制外部边框颜色。

BorderThickness：设置 Border 边框的宽度，

CornerRadius：表示将 Border 的角到圆的程度，设置四周的圆角大小。当数值为50的时候，Border变圆。

3.关于Border的示例

<Grid>
    <Border Width="100" Height="100"
 Background="LightBlue" BorderBrush="Red" 
BorderThickness="2,2,2,2" CornerRadius="20" >
        <Label Width="100" Height="100" Background="Transparent" 
Content="中国" HorizontalContentAlignment="Center" 
VerticalContentAlignment="Center" 
               FontSize="30"/>
    </Border>
</Grid>

二：Frame控件

1:frame常用的属性

frame 承载页面的标签

source : 承载页面的网址，也可以是自己项目里的页面

<!--source路径修改成 Source="/Pages/MyPage.xaml" 网络路径-->
<!--Source="../Pages/MyPage.xaml" 相对路径-->
<!--./windowBorder.xaml-->
<!--../Pages/MyPage.xaml-->

NavigationUIVisibility 属性 显示出一个自动记录前进后退导航的UI

LoadCompleted 页面加载完成之后的事件 根据对应的函数用来验证页面是否加载完成

2:关于Frame示例

 <Frame Name="f1" Source="../Pages/MyPage.xaml" VerticalAlignment="Top" HorizontalAlignment="Center" Margin="30,80" Width="700" Height="300"
 NavigationUIVisibility="Visible"
 LoadCompleted="f1_LoadCompleted" 
>
 </Frame>

fram加载自己页面的时候、页面加载完毕后的事件

如何创建页面
    1 点击项目 右键 新建wpf页面
    2 页面的根元素是page标签
    3 窗口的根元素是window标签

实例如下

<Page x:Class="WPFProgram.Pages.MYPage"
      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:local="clr-namespace:WPFProgram.Pages"
      mc:Ignorable="d" 
      d:DesignHeight="450" d:DesignWidth="800"
      Title="MYPage">

    <Grid Background="LightPink">
        <Label Width="300" Height="40" Content="我叫大帅你记住，智游集团我最帅" FontSize="20" />
    </Grid>
</Page>

使用代码进行页面跳转 跳转的三个方法

<Button Click="Button_Click" Width="100" Height="40" Margin="223,22,477,373" Content="跳转">
</Button>

private void f1_LoadCompleted(object sender, System.Windows.Navigation.NavigationEventArgs e)
{
    //e.ExtraData; 取出页面的参数，例如传递张三
    object e1 = e.ExtraData;
    if(e1!=null)
    {
        // 首次打开窗口显示百度页面，百度页面没有传参数，所以
        // e1是null，点击跳转按钮，加载自己页面的，传递是张三，所以e1就是张三
        MessageBox.Show("页面加载完毕:" + e1.ToString());
    }
}

// 按钮的点击事件
private void Button_Click(object sender, RoutedEventArgs e)
{
    //1 第一种使用frame的source属性进行跳转
    // new uri("网址")
    // this.f1.Source = new Uri("https://www.sina.com.cn/");
    //new uri("网址"，"网址的类型包含绝对路径和相对路径")
    //this.f1.Source = new Uri("https://www.sina.com.cn/", UriKind.Absolute);


    //2第二种跳转方式 使用Navigate进行跳转
   // this.f1.Navigate(new Uri("https://learn.microsoft.com/zh-cn/dotnet/api/system.windows.controls.frame.navigate?view=windowsdesktop-8.0&devlangs=csharp&f1url=%3FappId%3DDev16IDEF1%26l%3DZH-CN%26k%3Dk(System.Windows.Controls.Frame.Navigate)%3Bk(DevLang-csharp)%26rd%3Dtrue"));
   
    // 跳转到自己的页面 Pages/MyPage.xaml
    //MyPage p = new MyPage(); //创建页面对象
    //this.f1.Navigate(p); // 跳转到当前页面上

    //3第三种跳转方式 使用navigate跳转传参数
    MyPage p1 = new MyPage();
    this.f1.Navigate(p1, "张三"); //参数1是跳转的页面对象，参数2是传递参数
    //参数可以在页面的加载完毕的事件中取出参数值 在上面的f1_LoadCompleted函数中取出张三的值
}