Question how can i make those frame box to be at the center of main white frame?

Abba34

Member
Joined
Jul 27, 2022
Messages
7
Programming Experience
5-10
XML:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="[URL='http://xamarin.com/schemas/2014/forms']Xamarin | Open-source mobile app platform for .NET[/URL]"
             xmlns:x="[URL]http://schemas.microsoft.com/winfx/2009/xaml[/URL]"
             x:Class="Nigerian_Navy.Home" NavigationPage.HasNavigationBar="False" BackgroundColor="Blue">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="25"/>
            <RowDefinition Height="75" />
        </Grid.RowDefinitions>
      
      
    
            <Grid Grid.Row="1">
            <Label Text="Dashboard" FontSize="30" TextColor="White" FontAttributes="Bold" />
            </Grid>
      
      

        <Frame CornerRadius="12" BackgroundColor="White"  Grid.Row="2" >
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="120"/>
                    <ColumnDefinition Width="120"/>

                </Grid.ColumnDefinitions>

                <Grid.RowDefinitions>
                    <RowDefinition Height="100"/>
                    <RowDefinition Height="100"/>
                    <RowDefinition Height="100"/>

                </Grid.RowDefinitions>


              
                    <Grid Grid.Row="0" Grid.Column="0" >
                        <Frame CornerRadius="9">
                            <StackLayout>
                                <Image Source="Admin.png" HeightRequest="55" WidthRequest="45"/>
                                <Label Text="Staff Officers" FontSize="10" HorizontalOptions="Center" FontAttributes="Bold"/>
                                <BoxView></BoxView>
                            </StackLayout>
                        </Frame>
                    </Grid>



                    <Grid Grid.Row="0" Grid.Column="1" >
                        <Frame CornerRadius="9">
                            <StackLayout Spacing="8">
                                <Image Source="Contact.png" HeightRequest="55" WidthRequest="45"/>
                                <Label Text="Complain" FontSize="10" HorizontalOptions="Center" FontAttributes="Bold"/>
                                <BoxView></BoxView>
                            </StackLayout>
                        </Frame>
                    </Grid>


                    <Grid Grid.Row="1" Grid.Column="0" >
                        <Frame CornerRadius="9">
                            <StackLayout Spacing="8">
                                <Image Source="Location.png" HeightRequest="55" WidthRequest="45"/>
                                <Label Text="Tracking" FontSize="10" HorizontalOptions="Center" FontAttributes="Bold"/>
                                <BoxView></BoxView>
                            </StackLayout>
                        </Frame>
                    </Grid>


                    <Grid Grid.Row="1" Grid.Column="1"  >
                        <Frame CornerRadius="9">
                            <StackLayout Spacing="8">
                                <Image Source="Navy1.png" HeightRequest="55" WidthRequest="45"/>
                                <Label Text="About Us" FontSize="10" HorizontalOptions="Center" FontAttributes="Bold"/>
                                <BoxView></BoxView>
                            </StackLayout>
                        </Frame>
                    </Grid>


                    <Grid Grid.Row="2" Grid.Column="0" >
                        <Frame CornerRadius="9">
                            <StackLayout Spacing="8">
                                <Image Source="Nigeria.png" HeightRequest="55" WidthRequest="45"/>
                                <Label Text="Personel" FontSize="10" HorizontalOptions="Center" FontAttributes="Bold"/>
                                <BoxView></BoxView>
                            </StackLayout>
                        </Frame>
                    </Grid>


                    <Grid Grid.Row="2" Grid.Column="1" >
                        <Frame CornerRadius="9">
                            <StackLayout Spacing="8">
                                <Image Source="Navy.png" HeightRequest="55" WidthRequest="45"/>
                                <Label Text="Media Platform" FontSize="10" HorizontalOptions="Center" FontAttributes="Bold"/>
                                <BoxView></BoxView>
                            </StackLayout>
                        </Frame>
                    </Grid>



        
            </Grid>
        </Frame>


    </Grid>
</ContentPage>
 
Last edited by a moderator:
There's a lot wrong here.
  • Please don't post unformatted code snippets. They are too hard to read.
  • A post that contains nothing but code is not acceptable. You need to provide a FULL and CLEAR explanation of the problem. For a UI question like this one, it seems like a screenshot would help make things significantly clearer. The title should be a brief summary of what's in the post, not the entire explanation.
  • Please post in the most appropriate forum for the topic, not the first one in the list. The VS General forum is for questions about the VS IDE. If you have a Xamarin Forms question, post it in the Xamarin Forms forum.
 
There's a lot wrong here.
  • Please don't post unformatted code snippets. They are too hard to read.
  • A post that contains nothing but code is not acceptable. You need to provide a FULL and CLEAR explanation of the problem. For a UI question like this one, it seems like a screenshot would help make things significantly clearer. The title should be a brief summary of what's in the post, not the entire explanation.
  • Please post in the most appropriate forum for the topic, not the first one in the list. The VS General forum is for questions about the VS IDE. If you have a Xamarin Forms question, post it in the Xamarin Forms forum.
Ok
There's a lot wrong here.
  • Please don't post unformatted code snippets. They are too hard to read.
  • A post that contains nothing but code is not acceptable. You need to provide a FULL and CLEAR explanation of the problem. For a UI question like this one, it seems like a screenshot would help make things significantly clearer. The title should be a brief summary of what's in the post, not the entire explanation.
  • Please post in the most appropriate forum for the topic, not the first one in the list. The VS General forum is for questions about the VS IDE. If you have a Xamarin Forms question, post it in the Xamarin Forms forum.
Ok I will correct it thanks you
 
I moved this thread to the correct forum (I should have mentioned that) and I fixed your code formatting for you, then you went and created a duplicate thread and didn't format the code properly again. That's four threads now and not a decent one among them. I have deleted that new thread. Please update this thread with the requested FULL and CLEAR explanation of the problem, including relevant screenshots.
 
Dashboard:
how can I make it well cleared
XML:
C#:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="Xamarin | Open-source mobile app platform for .NET"
 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Nigerian_Navy.Home" NavigationPage.HasNavigationBar="False" BackgroundColor="Blue">

<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition Height="75" />
</Grid.RowDefinitions>
     
     
   
<Grid Grid.Row="1">
<Label Text="Dashboard" FontSize="30" TextColor="White" FontAttributes="Bold" />
</Grid>
     
     

<Frame CornerRadius="12" BackgroundColor="White"  Grid.Row="2" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
 <ColumnDefinition Width="120"/>

 </Grid.ColumnDefinitions>

<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="100"/>
 <RowDefinition Height="100"/>

 </Grid.RowDefinitions>


             
<Grid Grid.Row="0" Grid.Column="0" >
<Frame CornerRadius="9">
<StackLayout>
<Image Source="Admin.png" HeightRequest="55" WidthRequest="45"/>
<Label Text="Staff Officers" FontSize="10" HorizontalOptions="Center" FontAttributes="Bold"/>
 <BoxView></BoxView>
</StackLayout>
</Frame>
 </Grid>



<Grid Grid.Row="0" Grid.Column="1" >
<Frame CornerRadius="9">
<StackLayout Spacing="8">
<Image Source="Contact.png" HeightRequest="55" WidthRequest="45"/>
<Label Text="Complain" FontSize="10" HorizontalOptions="Center" FontAttributes="Bold"/>
 <BoxView></BoxView>
</StackLayout>
</Frame>
 </Grid>


<Grid Grid.Row="1" Grid.Column="0" >
<Frame CornerRadius="9">
<StackLayout Spacing="8">
<Image Source="Location.png" HeightRequest="55" WidthRequest="45"/>
<Label Text="Tracking" FontSize="10" HorizontalOptions="Center" FontAttributes="Bold"/>
 <BoxView></BoxView>
</StackLayout>
</Frame>
 </Grid>


<Grid Grid.Row="1" Grid.Column="1"  >
<Frame CornerRadius="9">
<StackLayout Spacing="8">
<Image Source="Navy1.png" HeightRequest="55" WidthRequest="45"/>
<Label Text="About Us" FontSize="10" HorizontalOptions="Center" FontAttributes="Bold"/>
 <BoxView></BoxView>
</StackLayout>
</Frame>
 </Grid>


<Grid Grid.Row="2" Grid.Column="0" >
<Frame CornerRadius="9">
<StackLayout Spacing="8">
<Image Source="Nigeria.png" HeightRequest="55" WidthRequest="45"/>
<Label Text="Personel" FontSize="10" HorizontalOptions="Center" FontAttributes="Bold"/>
 <BoxView></BoxView>
</StackLayout>
</Frame>
 </Grid>


<Grid Grid.Row="2" Grid.Column="1" >
<Frame CornerRadius="9">
<StackLayout Spacing="8">
<Image Source="Navy.png" HeightRequest="55" WidthRequest="45"/>
<Label Text="Media Platform" FontSize="10" HorizontalOptions="Center" FontAttributes="Bold"/>
 <BoxView></BoxView>
</StackLayout>
</Frame>
 </Grid>



       
</Grid>
 </Frame>


</Grid>
</ContentPage>
 

Attachments

  • Screenshot_20220807-120244.png
    Screenshot_20220807-120244.png
    68.6 KB · Views: 8
Last edited by a moderator:
And back again to unformatted code... *Sigh*

Going to edit post above to put the code into code tags...
 
Notice how you were using a StackLayout to do some centering within the cells of your grid? You do the same thing by putting the outermost grid within a StackLayout and apply the same kind of centering.
 
Back
Top Bottom