Как настроить файл xaml, чтобы он подходил для любого устройства - PullRequest
Новая
       0

Как настроить файл xaml, чтобы он подходил для любого устройства

0 голосов
/ 27 марта 2019

У меня есть страница в xamarin со следующим кодом xaml: 

<ScrollView>
        <StackLayout>
            <AbsoluteLayout x:Name="CompleteLayout" VerticalOptions="FillAndExpand" Scale="1">

                <Frame HeightRequest="575" TranslationX="500"/>
                <Frame x:Name="frame_Sport" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" TranslationY="380" TranslationX="12.5" HeightRequest="60" WidthRequest="120">
                <Frame.GestureRecognizers>
                    <TapGestureRecognizer Tapped="Sport_Clicked"/>
                </Frame.GestureRecognizers>
                <StackLayout Orientation="Vertical" Padding="0" HorizontalOptions="FillAndExpand">
                    <StackLayout Orientation="Horizontal" Spacing="-10">

                            <Label Text="    Sport" FontSize="18"/>
                    </StackLayout>
                    <StackLayout Orientation="Vertical" Spacing="-10" TranslationX="12.5">
                        <Label x:Name="txt_Sport" FontSize="18" TranslationY="2.5"/>
                    </StackLayout>
                    <Image Source="mark_green.png" Scale="0.17" TranslationX="-55" TranslationY="-135"/>
                </StackLayout>
            </Frame>

            <Frame x:Name="frame_Voeding" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" TranslationY="380" TranslationX="187.5" HeightRequest="176" WidthRequest="120">
                <Frame.GestureRecognizers>
                    <TapGestureRecognizer Tapped="Voeding_Clicked"/>
                </Frame.GestureRecognizers>
                <StackLayout Orientation="Vertical" Padding="0" HorizontalOptions="FillAndExpand">
                    <StackLayout Orientation="Horizontal" Spacing="-10">
                        <Label Text="    Voeding" FontSize="18"/>
                    </StackLayout>
                    <StackLayout Orientation="Vertical" Spacing="-10" TranslationX="12.5">
                        <Label x:Name="txt_Voeding1" FontSize="18" TranslationY="2.5"/>
                        <Label x:Name="txt_Voeding2" FontSize="18" TranslationY="15"/>
                        <Label x:Name="txt_Voeding3" FontSize="18" TranslationY="27.5"/>
                        <Label x:Name="txt_Voeding4" FontSize="18" TranslationY="40"/>
                        <Label x:Name="txt_Voeding5" FontSize="18" TranslationY="52.5"/>
                        <Label x:Name="txt_Voeding6" FontSize="18" TranslationY="65"/>
                    </StackLayout>
                    <Image Source="mark_red.png" Scale="0.17" TranslationX="-55" TranslationY="-205"/>
                </StackLayout>
            </Frame>


            <Frame x:Name="frame_Slaap" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Margin="12.5,495,0,0" HeightRequest="60" WidthRequest="120">
                <Frame.GestureRecognizers>
                    <TapGestureRecognizer Tapped="Slaap_Clicked"/>
                </Frame.GestureRecognizers>
                <StackLayout Orientation="Vertical" Padding="0" HorizontalOptions="FillAndExpand">
                    <StackLayout Orientation="Horizontal" Spacing="-10">
                            <Label Text="    Slaap" FontSize="18" />
                        </StackLayout>
                    <StackLayout Orientation="Vertical" Spacing="-10" TranslationX="12.5">
                        <Label x:Name="txt_Slaap" FontSize="18" TranslationY="2.5"/>
                    </StackLayout>
                    <Image Source="mark_blue.png" Scale="0.17" TranslationX="-55" TranslationY="-135"/>
                </StackLayout>
            </Frame>

            <Frame x:Name="frame_Frequentie" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" TranslationX="12.5" TranslationY="15" HeightRequest="30" WidthRequest="295">
                <StackLayout Orientation="Vertical" Padding="0" HorizontalOptions="FillAndExpand">
                    <Label Text="Volg schema zoveel keer per week" FontSize="17" TranslationY="-10" XAlign="Center" YAlign="Start"/>
                    <Label x:Name="lbl_Frequentie" FontSize="22" XAlign="Center" TranslationY="-15" YAlign="End" TextColor="#3BA0CB"/>
                </StackLayout>
            </Frame>

            <Frame x:Name="frame_Overzichtscirkel" TranslationX="12.5" TranslationY="100" WidthRequest="295" HeightRequest="225">
                    <gauge:SfCircularGauge VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Scale="1.1">
                    <gauge:SfCircularGauge.Headers>
                            <gauge:Header x:Name="DiagramHeader" TextSize="32" Position="0.5,0.55" ForegroundColor="#ffb342">
                            </gauge:Header>
                    </gauge:SfCircularGauge.Headers>

                        <gauge:SfCircularGauge.Scales>

                            <gauge:Scale ScaleStartOffset="0.8" ScaleEndOffset="0.75" LabelOffset="0.95" LabelPostfix=":00" ShowLastLabel = "False" StartValue = "00" EndValue = "24" Interval ="6" MinorTicksPerInterval = "5" StartAngle = "270" SweepAngle = "360">

                                <gauge:Scale.Ranges>
                                    <gauge:Range x:Name="SportRange"  Offset="0.8" Color="#91f297" Thickness="-1000"/>
                                    <gauge:Range x:Name="Voeding1Range"  Offset="0.8" Color="#e57578" Thickness="-1000"/>
                                    <gauge:Range x:Name="Voeding2Range"  Offset="0.8" Color="#e57578" Thickness="-1000"/>
                                    <gauge:Range x:Name="Voeding3Range" Offset="0.8" Color="#e57578" Thickness="-1000"/>
                                    <gauge:Range x:Name="Voeding4Range"  Offset="0.8" Color="#e57578" Thickness="-1000"/>
                                    <gauge:Range x:Name="Voeding5Range"  Offset="0.8" Color="#e57578" Thickness="-1000"/>
                                    <gauge:Range x:Name="Voeding6Range"  Offset="0.8" Color="#e57578" Thickness="-1000"/>
                                    <gauge:Range x:Name="SlaapRange1"   Offset="0.8" Color="#3973ce" Thickness="-1000"/>
                                    <gauge:Range x:Name="SlaapRange2" Offset="0.8" Color="#3973ce" Thickness="25"/>
                                </gauge:Scale.Ranges>

                                <gauge:Scale.Pointers>
                                    <gauge:MarkerPointer x:Name="LokaleTijdRange" Color="#ffb342"  MarkerShape="Rectangle" MarkerHeight="5" MarkerWidth="25" Offset="0.8"/>
                                </gauge:Scale.Pointers>


                                <gauge:Scale.MajorTickSettings>
                                    <gauge:TickSettings StartOffset="0.75" EndOffset="0.6" Thickness="1"/>
                                </gauge:Scale.MajorTickSettings>

                                <gauge:Scale.MinorTickSettings>
                                    <gauge:TickSettings StartOffset="0.75" EndOffset="0.7" Thickness="1"/>
                                </gauge:Scale.MinorTickSettings>

                            </gauge:Scale>

                        </gauge:SfCircularGauge.Scales>

                </gauge:SfCircularGauge>
            </Frame>
            </AbsoluteLayout>
        </StackLayout>
</ScrollView>

На моем устройстве (Samsung Galaxy S8) страница выглядит так:

s8

Но на другом телефоне (Samsung Galaxy S10) страница выглядит так:

s10

Конечно, вторая картинкаЯ не хочу, чтобы это выглядело.Как мне сделать этот код таким, чтобы он выглядел так же, как первое изображение на любом устройстве?Когда я кодировал страницу, я делал это на своем Samsung Galaxy S8, не зная, что на другом телефоне это будет выглядеть по-другому.Я понятия не имею, как мне сделать так, чтобы он выглядел одинаково на любом устройстве.

1 Ответ

1 голос
/ 28 марта 2019

Вы можете обернуть сетку из 4 строк и 2 столбцов в ScrollView. А затем поместите кадры в ячейки сетки.

Вы можете попробовать следующий код: 

<ScrollView>
    <Grid ColumnSpacing="5" RowSpacing="5" >
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="5*" />
            <RowDefinition Height="2*" />
            <RowDefinition Height="2*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Frame x:Name="frame_Frequentie" Grid.Row="0" Grid.ColumnSpan="2" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >
            <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand">
                <Label Text="Volg schema zoveel keer per week" FontSize="17" XAlign="Center" YAlign="Start"/>
                <Label x:Name="lbl_Frequentie" FontSize="22" XAlign="Center" YAlign="End" TextColor="#3BA0CB"/>
            </StackLayout>
        </Frame>

        <Frame x:Name="frame_Overzichtscirkel" Grid.Row="1" Grid.ColumnSpan="2" >
            <gauge:SfCircularGauge VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Scale="1.0">
                <gauge:SfCircularGauge.Headers>
                    <gauge:Header x:Name="DiagramHeader" TextSize="32" Position="0.5,0.55" ForegroundColor="#ffb342">
                    </gauge:Header>
                </gauge:SfCircularGauge.Headers>

                <gauge:SfCircularGauge.Scales>

                    <gauge:Scale ScaleStartOffset="0.8" ScaleEndOffset="0.75" LabelOffset="0.95" LabelPostfix=":00" ShowLastLabel = "False" StartValue = "00" EndValue = "24" Interval ="6" MinorTicksPerInterval = "5" StartAngle = "270" SweepAngle = "360">

                        <gauge:Scale.Ranges>
                            <gauge:Range x:Name="SportRange"  Offset="0.8" Color="#91f297" Thickness="-1000"/>
                            <gauge:Range x:Name="Voeding1Range"  Offset="0.8" Color="#e57578" Thickness="-1000"/>
                            <gauge:Range x:Name="Voeding2Range"  Offset="0.8" Color="#e57578" Thickness="-1000"/>
                            <gauge:Range x:Name="Voeding3Range" Offset="0.8" Color="#e57578" Thickness="-1000"/>
                            <gauge:Range x:Name="Voeding4Range"  Offset="0.8" Color="#e57578" Thickness="-1000"/>
                            <gauge:Range x:Name="Voeding5Range"  Offset="0.8" Color="#e57578" Thickness="-1000"/>
                            <gauge:Range x:Name="Voeding6Range"  Offset="0.8" Color="#e57578" Thickness="-1000"/>
                            <gauge:Range x:Name="SlaapRange1"   Offset="0.8" Color="#3973ce" Thickness="-1000"/>
                            <gauge:Range x:Name="SlaapRange2" Offset="0.8" Color="#3973ce" Thickness="25"/>
                        </gauge:Scale.Ranges>

                        <gauge:Scale.Pointers>
                            <gauge:MarkerPointer x:Name="LokaleTijdRange" Color="#ffb342"  MarkerShape="Rectangle" MarkerHeight="5" MarkerWidth="25" Offset="0.8"/>
                        </gauge:Scale.Pointers>


                        <gauge:Scale.MajorTickSettings>
                            <gauge:TickSettings StartOffset="0.75" EndOffset="0.6" Thickness="1"/>
                        </gauge:Scale.MajorTickSettings>

                        <gauge:Scale.MinorTickSettings>
                            <gauge:TickSettings StartOffset="0.75" EndOffset="0.7" Thickness="1"/>
                        </gauge:Scale.MinorTickSettings>

                    </gauge:Scale>

                </gauge:SfCircularGauge.Scales>

            </gauge:SfCircularGauge>
        </Frame>

        <Frame x:Name="frame_Sport" Grid.Row="2" Grid.Column="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >
            <Frame.GestureRecognizers>
                <TapGestureRecognizer />
            </Frame.GestureRecognizers>
            <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand">
                <StackLayout Orientation="Horizontal" >

                    <Label Text="    Sport" FontSize="18"/>
                </StackLayout>
                <StackLayout Orientation="Vertical" >
                    <Label x:Name="txt_Sport" FontSize="18"/>
                </StackLayout>

            </StackLayout>
        </Frame>

        <Frame x:Name="frame_Voeding" Grid.Row="2" Grid.RowSpan="2" Grid.Column="1" >
            <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >
                <Label Text="    Voeding" FontSize="18" />
                <Label x:Name="txt_Voeding1" FontSize="18" />
                <Label x:Name="txt_Voeding2" FontSize="18" />
                <Label x:Name="txt_Voeding3" FontSize="18" />
                <Label x:Name="txt_Voeding4" FontSize="18" />
                <Label x:Name="txt_Voeding5" FontSize="18" />
                <Label x:Name="txt_Voeding6" FontSize="18" />
            </StackLayout>
        </Frame>

        <Frame x:Name="frame_Slaap" Grid.Row="3" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >
            <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand">
                <StackLayout Orientation="Horizontal" >
                    <Label Text="    Slaap" FontSize="18" />
                </StackLayout>
                <StackLayout Orientation="Vertical" >
                    <Label x:Name="txt_Slaap" FontSize="18" />
                </StackLayout>
            </StackLayout>
        </Frame>

    </Grid>
</ScrollView>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...