03 - LayoutPanels例子 - ModularContent

我对TextBox的功能修改了下，动态更新显示和隐藏密码的图标。为了考验大家，各位自己去修改源代码。再次强调下，如果要把自定义控件加入到默认命名空间，一定要调用Shell扩展中的Navigate （源代码在https://www.cnblogs.com/dalgleish/p/18920441）。如下图。

 关于Tab，我使用了syncfusion的SfTabView，因为Maui自带的TabBar或者Tab是不能集成到独立页面Page中。

ModularContent.xaml代码

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MauiViews.MauiDemos.Book._03"
             x:Class="MauiViews.MauiDemos.Book._03.ModularContent"
             Title="ModularContent" HeightRequest="600" WidthRequest="800">
    <ScrollView>
        <StackLayout>
            <WrapLayout x:Name="pnlList" Background="LightSteelBlue">
                <Checker IsChecked="True" Text="Panel1" CheckedChanged="Checker_CheckedChanged"/>
                <Checker IsChecked="True" Text="Panel2" CheckedChanged="Checker_CheckedChanged"/>
                <Checker IsChecked="True" Text="Panel3" CheckedChanged="Checker_CheckedChanged"/>
                <Checker IsChecked="True" Text="Panel4" CheckedChanged="Checker_CheckedChanged"/>
            </WrapLayout>
            
            <WrapLayout Margin="3">
                <StackLayout x:Name="Panel1">
                    <Border Padding="5" Stroke="Yellow" StrokeThickness="2">
                        <Grid RowDefinitions="*,*" ColumnDefinitions="*,*">
                            <Button Margin="10" Padding="10" Text="1"/>
                            <Button Margin="10" Padding="10" Text="2" Grid.Column="1"/>
                            <Button Margin="10" Padding="10" Text="3" Grid.Row="1"/>
                            <Button Margin="10" Padding="10" Text="4" Grid.Column="1" Grid.Row="1"/>
                        </Grid>
                    </Border>
                </StackLayout>

                <StackLayout x:Name="Panel2">
                    <Border Padding="15" Stroke="Yellow" StrokeThickness="2">
                        <SfTabView>
                            <SfTabItem Header="Page 1">
                                <Button Padding="100,50,100,50" Text="Tabs"/>
                            </SfTabItem>
                            <SfTabItem Header="Page 2" Content="{Binding Path=Content, Source={local:TextBox}}"/>
                        </SfTabView>
                    </Border>
                </StackLayout>

                <StackLayout x:Name="Panel3">
                    <Border Padding="15" Stroke="Yellow" StrokeThickness="2">
                        <StackLayout>
                            <TextBox IsMultiline="True" MaximumWidthRequest="150"
                                     Text="This is a test of a text box that contains wrapped text."/>
                            <StackLayout Orientation="Horizontal">
                                <Button Text="ok" Margin="5,0"/>
                                <Button Text="cancel" Margin="10,0"/>
                            </StackLayout>
                        </StackLayout>
                    </Border>
                </StackLayout>

                <StackLayout x:Name="Panel4">
                    <Border Padding="15" Stroke="Yellow" StrokeThickness="2">
                        <Grid RowDefinitions="*,*" ColumnDefinitions="*,*">
                            <Button Margin="10" Padding="10" Text="1"/>
                            <Button Margin="10" Padding="10" Text="2" Grid.Column="1"/>
                            <Button Margin="10" Padding="10" Text="3" Grid.Row="1"/>
                            <Button Margin="10" Padding="10" Text="4" Grid.Column="1" Grid.Row="1"/>
                        </Grid>
                    </Border>
                </StackLayout>
            </WrapLayout>
        </StackLayout>
    </ScrollView>
</ContentPage>

对应cs代码

using Shares.Utility;

namespace MauiViews.MauiDemos.Book._03;

public partial class ModularContent : ContentPage
{
	public ModularContent()
	{
		InitializeComponent();
	}

    private void Checker_CheckedChanged(object? sender, CheckedChangedEventArgs e)
    {
		if (sender is Checker chk)
        {
			string name = chk.Text ?? "";
			var target = this.FindByName<VisualElement>(name);
			if (target != null)
			{
				target.IsVisible = e.Value;
            }	
        }
    }
}

运行效果，隐藏了Panel4，其中Tab选项里的Page2是绑定到了TextBox这个例子（ContentPage）