Xamarin forms

CodingNewUserCodingNewUser INMember ✭✭

Hi,

I want to create a page with a quote of the day box and below that several thumbnails which redirect to different pages.
Screenshots attached.

I am trying to use a grid layout with two columns but not getting the same pattern.
Please help.

Best Answer

Answers

  • JamesLaveryJamesLavery GBBeta, University ✭✭✭✭✭
    I don't know about your grid layout, but in order to have a consistent layout you need to ensure that your images are the same size.

    They will also have to be the same proportion if they are not going to look odd.
  • CodingNewUserCodingNewUser INMember ✭✭

    The images i am using are of the same size and proportion.
    Is there any other way i can do this.

  • JamesLaveryJamesLavery GBBeta, University ✭✭✭✭✭
    Can you post your XAML please (formatted)
  • CodingNewUserCodingNewUser INMember ✭✭

    <?xml version="1.0" encoding="utf-8" ?>

    <ContentPage.Content>

            <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
                <Image Source="Baby_Sapphire.png" Margin="0,50,0,0" Grid.Column="1" Grid.Row="0"></Image>
                <!--<CircleImge:ImageCircle Source="Baby_Sapphire.png" Grid.Column="1" Grid.Row="0" Scale="0.75" Margin="0,50,0,0"></CircleImge:ImageCircle>-->
            </StackLayout>
            <StackLayout HeightRequest="90" WidthRequest="220" BackgroundColor="#ffffff" Grid.Column="1" Grid.Row="2" VerticalOptions="Center" HorizontalOptions="Center">
                <Label XAlign="Center" Text="Quote of the day" TextColor="#c86fa5" Grid.Row="0"></Label>
                <WebView.Source>
                    <HtmlWebViewSource Html="{Binding Quote}" Grid.Row="1"></HtmlWebViewSource>
                </WebView.Source>
                <Label Text="{Binding QuoteAuthor}" Grid.Column="0" Grid.Row="2" XAlign="Center"></Label>
    
            </StackLayout>
    
    
        <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="*" />
                    <RowDefinition Height="*" />
                    <RowDefinition Height="*" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                    <StackLayout>
            <Image Source="My_concern.png" Grid.Column="0" Grid.Row="0" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"></Image>
                    <Image Source="img_leave_plan.png" Grid.Column="1" Grid.Row="1" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"></Image>
                    <Image Source="My_Checklist.png" Grid.Column="0" Grid.Row="1" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"></Image>
                    <Image Source="img_facilities.png" Grid.Column="1" Grid.Row="1" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"></Image>
                    <Image Source="My_buddies.png" Grid.Column="0" Grid.Row="2" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"></Image>
                    <Image Source="SapphireArticles.png" Grid.Column="1" Grid.Row="2" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"></Image>
                    <Image Source="policy.png" Grid.Column="0" Grid.Row="3" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"></Image>
                    <Image Source="SapphireNews.png" Grid.Column="1" Grid.Row="3" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"></Image>
                    <Image Source="Compass.png" Grid.Column="1" Grid.Row="4" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"></Image>
                    </StackLayout>
                </Grid>
        </StackLayout>
    </ContentPage.Content>
    

  • CodingNewUserCodingNewUser INMember ✭✭
    edited December 2017

    Thanks James this works. :smiley:
    I tried it in another way (almost similar) which works too.




    <Grid.RowDefinitions>





    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>


    </Grid.ColumnDefinitions>





































            </ScrollView>
    
  • JamesLaveryJamesLavery GBBeta, University ✭✭✭✭✭

    I'm afraid your XAML formatting hasn't worked so we can't see what your solution was.

Sign In or Register to comment.