Question

我已经获得了某些布局，而没有使用控制模板。但是，当我使用控件模板时，布局会中断。我无法填满视图。

App.xaml

<Application.Resources>
    <ResourceDictionary>
        <Color x:Key="BaseColor">#2b3d51</Color>
        <Color x:Key="PrimaryColor">#5bb2f5</Color>
        <Color x:Key="SuccessColor">#5cd674</Color>
        <Color x:Key="WarningColor">#e7e75e</Color>
        <Color x:Key="DangerColor">#e87461</Color>
        <Color x:Key="EmptyColor">#f5f5f5</Color>
        <Color x:Key="NoFill">#fafafa</Color>
        <ControlTemplate x:Key="MainTemplate">
            <StackLayout Spacing="0">
                <StackLayout
                   Orientation="Horizontal"
                   VerticalOptions="Start"
                   HeightRequest="30"
                   BackgroundColor="{StaticResource BaseColor}">
                    <Label Text="&#xf009;"
                        FontSize="20"
                        TextColor="#fefefe"
                        VerticalOptions="Center"
                        HorizontalOptions="Center">
                        <Label.FontFamily>
                            <OnPlatform
                                x:TypeArguments="x:String"
                                Android="fontawesomesolid.otf#Font Awesome 5 Free Solid"
                                iOS="fontawesomesolid"/>
                        </Label.FontFamily>
                    </Label>
                </StackLayout>

                <StackLayout
                    Orientation="Horizontal"
                    VerticalOptions="FillAndExpand"
                    Spacing="0" BackgroundColor="Red">

                    <ContentPresenter></ContentPresenter>
                </StackLayout>

                <StackLayout
                   Orientation="Horizontal"
                   VerticalOptions="End"
                   HeightRequest="20"
                   BackgroundColor="Gray">

                </StackLayout>
            </StackLayout>

        </ControlTemplate>
    </ResourceDictionary>
</Application.Resources>

Page.xaml

<ContentPage.Content>
    <StackLayout
                    Orientation="Horizontal"
                    Spacing="0">
        <StackLayout
                        Orientation="Vertical"
                        BackgroundColor="Olive"
                        WidthRequest="130"
                           HorizontalOptions="Start"
                        >
            <Entry Placeholder="Search"></Entry>
            <Label Text="this is it"></Label>
            <Label Text="this is it"></Label>
            <Label Text="this is it"></Label>
        </StackLayout>

        <StackLayout
            Orientation="Vertical"
                       BackgroundColor="Silver"
                       HorizontalOptions="FillAndExpand"
                       >
            <StackLayout Orientation="Vertical" HeightRequest="100" BackgroundColor="Yellow">
                <Label Text="I'm here" ></Label>
            </StackLayout>
        </StackLayout>
    </StackLayout>

</ContentPage.Content>

在这里您可以看到我正在使用侧边栏和剩余的内容空间，但是内容没有填满屏幕。

从上图可以看到，黄色和银色区域必须填充红色的其余空间。我也尝试了网格布局，但结果相同。你能弄清楚我在这里想念什么吗？

Answer 1

这可以通过在父页面和子页面上使用网格来实现。

app.xaml

<Application.Resources>
    <ResourceDictionary>
        <ControlTemplate x:Key="MainTemplate">
            <Grid RowSpacing="0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="30" />
                    <RowDefinition Height="*" />
                    <RowDefinition Height="20" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <StackLayout Grid.Row="0" Grid.Column="0" BackgroundColor="Navy"></StackLayout>
                <ContentPresenter Grid.Row="1" Grid.Column="0" BackgroundColor="Blue"></ContentPresenter>
                <StackLayout Grid.Row="2" Grid.Column="0" BackgroundColor="Brown"></StackLayout>
             </Grid>
        </ControlTemplate>
    </ResourceDictionary>
</Application.Resources>

Page.xaml

<ContentPage.Content>
    <Grid ColumnSpacing="0">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="130" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <StackLayout Grid.Row="0" Grid.Column="0" BackgroundColor="DarkSeaGreen" Orientation="Vertical">
            <Entry Placeholder="Search"></Entry>
            <Label Text="this is it"></Label>
            <Label Text="this is it"></Label>
            <Label Text="this is it"></Label>
        </StackLayout>

        <StackLayout Grid.Row="0" Grid.Column="1" BackgroundColor="BurlyWood">
            <Label Text="I'm here"  BackgroundColor="AliceBlue"></Label>
        </StackLayout>
    </Grid>
</ContentPage.Content>

请参阅屏幕截图

Xamarin没有填充和扩展控件模板

1 个答案: