【问题标题】:Xamarin no fill and expand in control templateXamarin 在控件模板中没有填充和扩展
【发布时间】:2018-10-04 21:29:12
【问题描述】:

我在不使用控件模板的情况下获得了某些布局。但是当我使用控制模板时,布局会中断。我无法填满视图。

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>

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

从上图中可以看出,黄色和银色区域必须填充剩余的红色空间。我也尝试过网格布局,但结果相同。 你能弄清楚我在这里遗漏了什么吗?

【问题讨论】:

    标签: xaml xamarin.forms


    【解决方案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>
    

    参考截图

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2018-04-30
      • 2010-12-20
      • 2013-01-08
      • 1970-01-01
      • 2021-01-08
      • 2022-01-17
      • 1970-01-01
      • 2022-08-15
      相关资源
      最近更新 更多