XAML 在.net maui中向导航添加背景图像

zmeyuzjn 于 2023-08-01 发布在 .NET

关注(0)|答案(1)|浏览(198)

我想做一个背景图像在整个屏幕上传播，并使网页导航到，显示为一个在中心块。目前的背景图像代码，我有不工作，我不确定如何去显示在一个块的其他网页。

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="Nova.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:Nova"
    xmlns:views="clr-namespace:Nova.View"
    Shell.FlyoutBehavior="Locked"
     BackgroundImageSource="Assets/BackgroundImage.png">

    <!--<ShellContent
        Title="Home"
        ContentTemplate="{DataTemplate local:MainPage}"
        Route="MainPage" />-->

    <Shell.FlyoutHeader>
        <Image Source="Assets/logo.png" HeightRequest="152"></Image>
    </Shell.FlyoutHeader>

    <Shell.FlyoutFooter>
        <Label Text="Username" Padding="20"></Label>
    </Shell.FlyoutFooter>

    <FlyoutItem Title="Dashboard" Icon="dotnet_bot.png">
        <Tab>
            <ShellContent 
                Title="Dashboard"
                ContentTemplate="{DataTemplate views:DashboardPage}"/>
        </Tab>

    </FlyoutItem>
    <FlyoutItem Title="Clients" Icon="dotnet_bot.png">
        <Tab>
            <ShellContent 
                Title="Clients"
                ContentTemplate="{DataTemplate views:ClientListPage}"/>
        </Tab>
    </FlyoutItem>
    <FlyoutItem Title="Staff" Icon="dotnet_bot.png">
        <Tab>
            <ShellContent 
                Title="Staff"
                ContentTemplate="{DataTemplate views:StaffListPage}"/>
        </Tab>
    </FlyoutItem>
    <FlyoutItem Title="Projects" Icon="dotnet_bot.png">
        <Tab>
            <ShellContent 
                Title="Projects"
                ContentTemplate="{DataTemplate views:ProjectsPage}"/>
        </Tab>
    </FlyoutItem>
    <FlyoutItem Title="Finances" Icon="dotnet_bot.png">
        <Tab>
            <ShellContent 
                Title="Finances"
                ContentTemplate="{DataTemplate views:FundsPage}"/>
        </Tab>
    </FlyoutItem>

</Shell>

字符串

xaml

来源：https://stackoverflow.com/questions/76779222/add-background-image-to-navigation-in-net-maui

1条答案

按热度按时间

ktecyv1j1#

您要做的事情不符合Shell的设计。也没有任何其他导航方案（如NavigationPage）;应用程序导航是“逐页”完成的，并且页面填满屏幕。
创建一个单独的页面。在里面，有一个ContentView。将ContentView更改为指向（包含）不同的内容。
在App.xaml.cs中，更改行：

MainPage = new AppShell();

字符串
致：

MainPage = new MainPage();

型
其中MainPage.xaml类似于：

<ContentPage ...
    x:Class="MyProject.MainPage">

  <!-- numbers control the area surrounding the "middle area" -->
  <Grid RowDefinitions="50,*,50" ColumnDefinitions="50,*,50">

    <!-- covers the whole screen -->
    <Image x:Name="backgroundImage" Grid.Row="0" Grid.RowSpan="3"
           Grid.Column="0" Grid.ColumnSpan="3" Source=... />

    <!-- "middle area". It is "on top of" backgroundImage -->
    <ContentView x:Name="content" Grid.Row="1" Grid.Column="1" />

  </Grid>
</ContentPage>

型
MainPage.xaml.cs:

public partial class MainPage : ContentPage
{
  public MainPage()
  {
    InitializeComponent();
    content.Content = new MyView1();
  }

  public void GoView2()
  {
    content.Content = new MyView2();
  }
}

型
MyView1.xaml:

<ContentView ...
    x:Class="MyProject.MyView1" />
  ...
</ContentView>

型
等等。
注意：MyView1（等等）不一定是ContentView。每个类可以是任何布局类，例如Grid或VerticalStackLayout。

可选：要重用视图，请使用Service Provider而不是new MyView1()

参见“AppServiceProvider：使用服务提供商避免“new MyPage（）; https://stackoverflow.com/a/76741424/199364的“”。
随着您对Maui越来越熟悉，您将看到许多使用Dependency Injection的建议。
我用content.Content = new MyView1();回答了这个问题，因为它更容易理解，也更容易上手。
应用上面链接的答案部分，将其更改为：

content.Content = AppServiceProvider.GetService<MyView1>();

型
这一节展示了使用这种技术需要执行的其他编码。
我不会在这里讨论你为什么要这样做。
先别担心这个首先让new MyView1()工作。

赞(0）回复(0）举报 2023-08-01

我来回答

XAML 在.net maui中向导航添加背景图像

1条答案

相关问题

热门标签

最新问答