WPF —— Border、Frame控件详解

一：Border控件

1.Border介绍

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

2.Border 常用的属性

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

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

BorderThickness：设置 Border 边框的宽度，

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

3.关于Border的示例

cs 复制代码

<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 : 承载页面的网址，也可以是自己项目里的页面

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

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

2:关于Frame示例

cs 复制代码

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

实例如下

cs 复制代码

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

cs 复制代码

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函数中取出张三的值
}

WPF —— Border、Frame控件详解

一：Border控件

1.Border介绍

2.Border 常用的属性

3.关于Border的示例

二：Frame控件

1:frame常用的属性

2:关于Frame示例

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

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