10. 布局

最新推荐文章于 2022-11-19 20:18:15 发布

singhwong

最新推荐文章于 2022-11-19 20:18:15 发布

阅读量124

点赞数

分类专栏： Xamarin.Forms 开发文章标签： Xamarin.Forms

本文链接：https://blog.csdn.net/qq_41708190/article/details/108321974

版权

Xamarin.Forms 开发专栏收录该内容

14 篇文章 1 订阅

订阅专栏

About页面使用Grid和StackLayout控件来安排其子元素。Grid控件允许定义行和列——就像使用UWP中的Grid控件一样——使用Auto、*、和固定大小设置：

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="BooksAppX.Views.AboutPage">
    <ContentPage.IconImageSource>
        <!--<OnPlatform x:TypeArguments="FileImageSource">
            <On Platform="iOS" Value="tab_about.png"/>
        </OnPlatform>-->
        <FileImageSource File="tab_about.png"/>
    </ContentPage.IconImageSource>
    <ContentPage.Content>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="Fill"
                         BackgroundColor="Black">
                <StackLayout Orientation="Horizontal" HorizontalOptions="Center"
                             VerticalOptions="Center">
                    <ContentView Padding="0,40" VerticalOptions="FillAndExpand">
                        <Image VerticalOptions="Center"
                               HeightRequest="64"
                               Source="xamarin_logo.png">
                            <!--<Image.Source>
                                <OnPlatform x:TypeArguments="FileImageSource">
                                    <On Platform="UWP" Value="Assets/xamarin_logo.png"/>
                                    <On Platform="iOS" Value="tab_feed.png"/>
                                </OnPlatform>
                            </Image.Source>-->
                        </Image>
                    </ContentView>
                </StackLayout>
            </StackLayout>
            <ScrollView Grid.Row="1">
                <StackLayout Orientation="Vertical" Padding="16,40" Spacing="10">
                    <Label FontSize="22">
                        <Label.FormattedText>
                            <FormattedString>
                                <FormattedString.Spans>
                                    <Span Text="AppName" FontAttributes="Bold" FontSize="22"/>
                                    <Span Text=" "/>
                                    <Span Text="1.0" TextColor="Blue"/>
                                </FormattedString.Spans>
                            </FormattedString>
                        </Label.FormattedText>
                    </Label>
                    <Label>
                        <Label.FormattedText>
                            <FormattedString>
                                <FormattedString.Spans>
                                    <Span Text="This is a sample app for "/>
                                    <Span Text="Professional C# and .NET Core 2.0"
                                          FontAttributes="Bold"/>
                                    <Span Text="."/>
                                </FormattedString.Spans>
                            </FormattedString>
                        </Label.FormattedText>
                    </Label>
                    <Label>
                        <Label.FormattedText>
                            <FormattedString>
                                <FormattedString.Spans>
                                    <Span Text="It shares code with"/>
                                    <Span Text=" "/>
                                    <Span Text="iOS, Android, and Windows" FontAttributes="Bold"/>
                                    <Span Text="."/>
                                </FormattedString.Spans>
                            </FormattedString>
                        </Label.FormattedText>
                    </Label>
                    <Button Margin="0,10,0,0" Text="Learn more"
                            BackgroundColor="Pink" TextColor="Black">

                    </Button>
                </StackLayout>
            </ScrollView>
        </Grid>
    </ContentPage.Content>
</ContentPage>

下表列出了Xamarin.Forms的布局控件，以及它们与Windows面板控件的比较。

About页面还有其他一些有趣的方面。使用OnPlatform元素，可以根据平台定义不同的XAML元素和属性。使用Image元素，将Source属性设置为一个PNG文件。该文件对Android和iOS是有效的，但是对于UWP，该文件存储在Assets文件夹中。只有UWP中的Source属性的设置是不同的，它由OnPlatform元素定义：

                            <Image.Source>
                                <OnPlatform x:TypeArguments="FileImageSource">
                                    <On Platform="UWP" Value="Assets/xamarin_logo.png"/>
                                </OnPlatform>
                            </Image.Source>

另一个有趣的部分是Label元素。与UWP中的TextBlock一样，Label不仅可以包含简单的文本，还可以包含用不用字体和颜色格式化的文本。使用带有Label的不同文本格式，需要将FormattedText属性设置为FormattedString：

                    <Label>
                        <Label.FormattedText>
                            <FormattedString>
                                <FormattedString.Spans>
                                    <Span Text="This is a sample app for "/>
                                    <Span Text="Professional C# and .NET Core 2.0"
                                          FontAttributes="Bold"/>
                                    <Span Text="."/>
                                </FormattedString.Spans>
                            </FormattedString>
                        </Label.FormattedText>
                    </Label>