How to set the perfect corner radius for the image inside a XfxCardView in xamarin forms?

I have a card view and in that, I have an image. I have to set the corner radius for that image so I'm using frames for doing that.

This is the UI I need and I have marked the Image

This is the result I'm getting
.

This is my code

 <xfx:XfxCardView 

                        BackgroundColor="White"

                        CornerRadius="30" 

                    Elevation="30"

                 HeightRequest="100" >

                    <Grid RowSpacing="0">

                        <Grid ColumnSpacing="0">

                            <Grid.RowDefinitions >

                                <RowDefinition Height="*"></RowDefinition>



                                <RowDefinition Height="Auto"></RowDefinition>

                            </Grid.RowDefinitions>

                            <Grid.ColumnDefinitions >

                                <ColumnDefinition Width="*"></ColumnDefinition>

                                <ColumnDefinition Width="Auto"></ColumnDefinition>

                            </Grid.ColumnDefinitions>

                            <Frame CornerRadius="10" Margin="0"  Padding="0" IsClippedToBounds="True">

                                <Image Margin="-70,0,0,0"   Source="restaurantimage1.jpg"  Grid.Row="0" Grid.Column="0" Grid.RowSpan="3"/>

                            </Frame>

                            <Label Grid.Row="0" Grid.Column="1" Margin="0,0,100,0" BackgroundColor="Aqua" HorizontalOptions="Start" Text="Premera restaurant" TextColor="Black" FontFamily="Bold,20"/>

                            <Label Grid.Row="1" Grid.Column="1" Margin="0,0,100,0" BackgroundColor="Green" HorizontalTextAlignment="Start" Text="Avenue Road,256" TextColor="Blue"/>

                            <Label Grid.Row="2" Grid.Column="1" Margin="0,0,100,0" BackgroundColor="LightBlue" VerticalTextAlignment="Start" Text="Indian,Italy,Chinese" TextColor="LightGray"/>

                        </Grid>

                    </Grid>

                </xfx:XfxCardView>

I have made changes in corner radius and margins but I'm not getting the desired result. Do I have to use something else to do that or should I make any changes in the Frame.
I have done some changes in code so and I'm slightly near to the desired output.
This is the current output

There is still a gap in the frame as you can see I have made changes in the code but still it is not getting fixed. This is my code

 <xfx:XfxCardView 

                        BackgroundColor="White"

                        CornerRadius="30" 

                    Elevation="30"

                 HeightRequest="100" >

                    <Grid RowSpacing="0">

                        <Grid ColumnSpacing="0">

                            <Grid.RowDefinitions >

                                <RowDefinition Height="*"></RowDefinition>



                                <RowDefinition Height="Auto"></RowDefinition>

                            </Grid.RowDefinitions>

                            <Grid.ColumnDefinitions >

                                <ColumnDefinition Width="*"></ColumnDefinition>

                                <ColumnDefinition Width="Auto"></ColumnDefinition>

                            </Grid.ColumnDefinitions>

                            <Frame Margin="0" Padding="-40" CornerRadius="25" Grid.RowSpan="3"  BackgroundColor="LightBlue"  IsClippedToBounds="True">

                                <Image Margin="-70,0,0,0"  Grid.Row="0" Grid.Column="0" Grid.RowSpan="3"  BackgroundColor="AliceBlue"  Source="restaurantimage1.jpg"  />

                            </Frame>

                            <Label Grid.Row="0" Grid.Column="1" Margin="0,0,100,0"  HorizontalOptions="Start" Text="Premera restaurant" TextColor="Black" FontFamily="Bold,20"/>

                            <Label Grid.Row="1" Grid.Column="1" Margin="0,0,100,0"  HorizontalTextAlignment="Start" Text="Avenue Road,256" TextColor="Blue"/>

                            <Label Grid.Row="2" Grid.Column="1" Margin="0,0,100,0"  VerticalTextAlignment="Start" Text="Indian,Italy,Chinese" TextColor="LightGray"/>

                        </Grid>

                    </Grid>

                </xfx:XfxCardView>

edited Nov 26 '18 at 6:21

asked Nov 26 '18 at 5:08

user3452

549

add a comment |

I have a card view and in that, I have an image. I have to set the corner radius for that image so I'm using frames for doing that.

This is the UI I need and I have marked the Image

This is the result I'm getting
.

This is my code

 <xfx:XfxCardView 

                        BackgroundColor="White"

                        CornerRadius="30" 

                    Elevation="30"

                 HeightRequest="100" >

                    <Grid RowSpacing="0">

                        <Grid ColumnSpacing="0">

                            <Grid.RowDefinitions >

                                <RowDefinition Height="*"></RowDefinition>



                                <RowDefinition Height="Auto"></RowDefinition>

                            </Grid.RowDefinitions>

                            <Grid.ColumnDefinitions >

                                <ColumnDefinition Width="*"></ColumnDefinition>

                                <ColumnDefinition Width="Auto"></ColumnDefinition>

                            </Grid.ColumnDefinitions>

                            <Frame CornerRadius="10" Margin="0"  Padding="0" IsClippedToBounds="True">

                                <Image Margin="-70,0,0,0"   Source="restaurantimage1.jpg"  Grid.Row="0" Grid.Column="0" Grid.RowSpan="3"/>

                            </Frame>

                            <Label Grid.Row="0" Grid.Column="1" Margin="0,0,100,0" BackgroundColor="Aqua" HorizontalOptions="Start" Text="Premera restaurant" TextColor="Black" FontFamily="Bold,20"/>

                            <Label Grid.Row="1" Grid.Column="1" Margin="0,0,100,0" BackgroundColor="Green" HorizontalTextAlignment="Start" Text="Avenue Road,256" TextColor="Blue"/>

                            <Label Grid.Row="2" Grid.Column="1" Margin="0,0,100,0" BackgroundColor="LightBlue" VerticalTextAlignment="Start" Text="Indian,Italy,Chinese" TextColor="LightGray"/>

                        </Grid>

                    </Grid>

                </xfx:XfxCardView>

There is still a gap in the frame as you can see I have made changes in the code but still it is not getting fixed. This is my code

 <xfx:XfxCardView 

                        BackgroundColor="White"

                        CornerRadius="30" 

                    Elevation="30"

                 HeightRequest="100" >

                    <Grid RowSpacing="0">

                        <Grid ColumnSpacing="0">

                            <Grid.RowDefinitions >

                                <RowDefinition Height="*"></RowDefinition>



                                <RowDefinition Height="Auto"></RowDefinition>

                            </Grid.RowDefinitions>

                            <Grid.ColumnDefinitions >

                                <ColumnDefinition Width="*"></ColumnDefinition>

                                <ColumnDefinition Width="Auto"></ColumnDefinition>

                            </Grid.ColumnDefinitions>

                            <Frame Margin="0" Padding="-40" CornerRadius="25" Grid.RowSpan="3"  BackgroundColor="LightBlue"  IsClippedToBounds="True">

                                <Image Margin="-70,0,0,0"  Grid.Row="0" Grid.Column="0" Grid.RowSpan="3"  BackgroundColor="AliceBlue"  Source="restaurantimage1.jpg"  />

                            </Frame>

                            <Label Grid.Row="0" Grid.Column="1" Margin="0,0,100,0"  HorizontalOptions="Start" Text="Premera restaurant" TextColor="Black" FontFamily="Bold,20"/>

                            <Label Grid.Row="1" Grid.Column="1" Margin="0,0,100,0"  HorizontalTextAlignment="Start" Text="Avenue Road,256" TextColor="Blue"/>

                            <Label Grid.Row="2" Grid.Column="1" Margin="0,0,100,0"  VerticalTextAlignment="Start" Text="Indian,Italy,Chinese" TextColor="LightGray"/>

                        </Grid>

                    </Grid>

                </xfx:XfxCardView>

edited Nov 26 '18 at 6:21

asked Nov 26 '18 at 5:08

user3452

549

add a comment |

I have a card view and in that, I have an image. I have to set the corner radius for that image so I'm using frames for doing that.

This is the UI I need and I have marked the Image

This is the result I'm getting
.

This is my code

 <xfx:XfxCardView 

                        BackgroundColor="White"

                        CornerRadius="30" 

                    Elevation="30"

                 HeightRequest="100" >

                    <Grid RowSpacing="0">

                        <Grid ColumnSpacing="0">

                            <Grid.RowDefinitions >

                                <RowDefinition Height="*"></RowDefinition>



                                <RowDefinition Height="Auto"></RowDefinition>

                            </Grid.RowDefinitions>

                            <Grid.ColumnDefinitions >

                                <ColumnDefinition Width="*"></ColumnDefinition>

                                <ColumnDefinition Width="Auto"></ColumnDefinition>

                            </Grid.ColumnDefinitions>

                            <Frame CornerRadius="10" Margin="0"  Padding="0" IsClippedToBounds="True">

                                <Image Margin="-70,0,0,0"   Source="restaurantimage1.jpg"  Grid.Row="0" Grid.Column="0" Grid.RowSpan="3"/>

                            </Frame>

                            <Label Grid.Row="0" Grid.Column="1" Margin="0,0,100,0" BackgroundColor="Aqua" HorizontalOptions="Start" Text="Premera restaurant" TextColor="Black" FontFamily="Bold,20"/>

                            <Label Grid.Row="1" Grid.Column="1" Margin="0,0,100,0" BackgroundColor="Green" HorizontalTextAlignment="Start" Text="Avenue Road,256" TextColor="Blue"/>

                            <Label Grid.Row="2" Grid.Column="1" Margin="0,0,100,0" BackgroundColor="LightBlue" VerticalTextAlignment="Start" Text="Indian,Italy,Chinese" TextColor="LightGray"/>

                        </Grid>

                    </Grid>

                </xfx:XfxCardView>

There is still a gap in the frame as you can see I have made changes in the code but still it is not getting fixed. This is my code

 <xfx:XfxCardView 

                        BackgroundColor="White"

                        CornerRadius="30" 

                    Elevation="30"

                 HeightRequest="100" >

                    <Grid RowSpacing="0">

                        <Grid ColumnSpacing="0">

                            <Grid.RowDefinitions >

                                <RowDefinition Height="*"></RowDefinition>



                                <RowDefinition Height="Auto"></RowDefinition>

                            </Grid.RowDefinitions>

                            <Grid.ColumnDefinitions >

                                <ColumnDefinition Width="*"></ColumnDefinition>

                                <ColumnDefinition Width="Auto"></ColumnDefinition>

                            </Grid.ColumnDefinitions>

                            <Frame Margin="0" Padding="-40" CornerRadius="25" Grid.RowSpan="3"  BackgroundColor="LightBlue"  IsClippedToBounds="True">

                                <Image Margin="-70,0,0,0"  Grid.Row="0" Grid.Column="0" Grid.RowSpan="3"  BackgroundColor="AliceBlue"  Source="restaurantimage1.jpg"  />

                            </Frame>

                            <Label Grid.Row="0" Grid.Column="1" Margin="0,0,100,0"  HorizontalOptions="Start" Text="Premera restaurant" TextColor="Black" FontFamily="Bold,20"/>

                            <Label Grid.Row="1" Grid.Column="1" Margin="0,0,100,0"  HorizontalTextAlignment="Start" Text="Avenue Road,256" TextColor="Blue"/>

                            <Label Grid.Row="2" Grid.Column="1" Margin="0,0,100,0"  VerticalTextAlignment="Start" Text="Indian,Italy,Chinese" TextColor="LightGray"/>

                        </Grid>

                    </Grid>

                </xfx:XfxCardView>

edited Nov 26 '18 at 6:21

asked Nov 26 '18 at 5:08

user3452

549

I have a card view and in that, I have an image. I have to set the corner radius for that image so I'm using frames for doing that.

This is the UI I need and I have marked the Image

This is the result I'm getting
.

This is my code

 <xfx:XfxCardView 

                        BackgroundColor="White"

                        CornerRadius="30" 

                    Elevation="30"

                 HeightRequest="100" >

                    <Grid RowSpacing="0">

                        <Grid ColumnSpacing="0">

                            <Grid.RowDefinitions >

                                <RowDefinition Height="*"></RowDefinition>



                                <RowDefinition Height="Auto"></RowDefinition>

                            </Grid.RowDefinitions>

                            <Grid.ColumnDefinitions >

                                <ColumnDefinition Width="*"></ColumnDefinition>

                                <ColumnDefinition Width="Auto"></ColumnDefinition>

                            </Grid.ColumnDefinitions>

                            <Frame CornerRadius="10" Margin="0"  Padding="0" IsClippedToBounds="True">

                                <Image Margin="-70,0,0,0"   Source="restaurantimage1.jpg"  Grid.Row="0" Grid.Column="0" Grid.RowSpan="3"/>

                            </Frame>

                            <Label Grid.Row="0" Grid.Column="1" Margin="0,0,100,0" BackgroundColor="Aqua" HorizontalOptions="Start" Text="Premera restaurant" TextColor="Black" FontFamily="Bold,20"/>

                            <Label Grid.Row="1" Grid.Column="1" Margin="0,0,100,0" BackgroundColor="Green" HorizontalTextAlignment="Start" Text="Avenue Road,256" TextColor="Blue"/>

                            <Label Grid.Row="2" Grid.Column="1" Margin="0,0,100,0" BackgroundColor="LightBlue" VerticalTextAlignment="Start" Text="Indian,Italy,Chinese" TextColor="LightGray"/>

                        </Grid>

                    </Grid>

                </xfx:XfxCardView>

There is still a gap in the frame as you can see I have made changes in the code but still it is not getting fixed. This is my code

 <xfx:XfxCardView 

                        BackgroundColor="White"

                        CornerRadius="30" 

                    Elevation="30"

                 HeightRequest="100" >

                    <Grid RowSpacing="0">

                        <Grid ColumnSpacing="0">

                            <Grid.RowDefinitions >

                                <RowDefinition Height="*"></RowDefinition>



                                <RowDefinition Height="Auto"></RowDefinition>

                            </Grid.RowDefinitions>

                            <Grid.ColumnDefinitions >

                                <ColumnDefinition Width="*"></ColumnDefinition>

                                <ColumnDefinition Width="Auto"></ColumnDefinition>

                            </Grid.ColumnDefinitions>

                            <Frame Margin="0" Padding="-40" CornerRadius="25" Grid.RowSpan="3"  BackgroundColor="LightBlue"  IsClippedToBounds="True">

                                <Image Margin="-70,0,0,0"  Grid.Row="0" Grid.Column="0" Grid.RowSpan="3"  BackgroundColor="AliceBlue"  Source="restaurantimage1.jpg"  />

                            </Frame>

                            <Label Grid.Row="0" Grid.Column="1" Margin="0,0,100,0"  HorizontalOptions="Start" Text="Premera restaurant" TextColor="Black" FontFamily="Bold,20"/>

                            <Label Grid.Row="1" Grid.Column="1" Margin="0,0,100,0"  HorizontalTextAlignment="Start" Text="Avenue Road,256" TextColor="Blue"/>

                            <Label Grid.Row="2" Grid.Column="1" Margin="0,0,100,0"  VerticalTextAlignment="Start" Text="Indian,Italy,Chinese" TextColor="LightGray"/>

                        </Grid>

                    </Grid>

                </xfx:XfxCardView>

image xamarin xamarin.forms cardview

edited Nov 26 '18 at 6:21

asked Nov 26 '18 at 5:08

user3452

549

edited Nov 26 '18 at 6:21

asked Nov 26 '18 at 5:08

user3452

549

edited Nov 26 '18 at 6:21

asked Nov 26 '18 at 5:08

user3452

549

asked Nov 26 '18 at 5:08

user3452

549

asked Nov 26 '18 at 5:08

user3452

549

add a comment |

2 Answers
2

active

oldest

votes

Try setting the is clipped to bounds property as true in your Grid's xaml

 <Grid RowSpacing="0" IsClippedToBounds="True">

answered Nov 26 '18 at 9:27

G.hakim

4,97411136

No, it didn't fix my issue.

– user3452
Nov 26 '18 at 11:18

Why are you setting padding and margin in minus?

– G.hakim
Nov 26 '18 at 12:01

That is because the image was shown very small so I adjusted the margin and padding value to make it look bigger.

– user3452
Nov 27 '18 at 5:17

1

That is not how you do it you change the aspect of the image rather than give it all this did you try adding Aspect="AspectFit" to the image control?

– G.hakim
Nov 27 '18 at 5:52

K I'll try that.

– user3452
Nov 27 '18 at 5:53

add a comment |

I fixed it by changing the margin of my frame. This is my code now

 <xfx:XfxCardView 

                        BackgroundColor="White"

                        CornerRadius="30" 

                    Elevation="20"

                 HeightRequest="150" IsClippedToBounds="True">

                    <Grid RowSpacing="0" >

                        <Grid ColumnSpacing="0">

                            <Grid.RowDefinitions >

                                <RowDefinition Height="*"></RowDefinition>



                                <RowDefinition Height="Auto"></RowDefinition>

                            </Grid.RowDefinitions>

                            <Grid.ColumnDefinitions >

                                <ColumnDefinition Width="*"></ColumnDefinition>

                                <ColumnDefinition Width="Auto"></ColumnDefinition>

                            </Grid.ColumnDefinitions>

                            <Frame Margin="10,10,10,20" Padding="-40" CornerRadius="10" Grid.RowSpan="3"  BackgroundColor="LightBlue"  IsClippedToBounds="True">

                                <Image Margin="-70,0,0,0"  Grid.Row="0" Grid.Column="0" Grid.RowSpan="3"  BackgroundColor="AliceBlue"  Source="restaurantimage1.jpg"  />

                            </Frame>

                            <Label Grid.Row="0" Grid.Column="1" Margin="0,30,30,0"  HorizontalOptions="Start" Text="Premera restaurant" TextColor="Black" FontFamily="Bold,20"/>

                            <Image Grid.Row="0" Grid.Column="1" Margin="0,30,10,0" HorizontalOptions="End" Source="whitehearticon3.jpg"/>

                            <Label Grid.Row="1" Grid.Column="1" Margin="0,-20,40,0"  HorizontalTextAlignment="Start" Text="Avenue Road,256" TextColor="Blue"/>

                            <Label Grid.Row="2" Grid.Column="1" Margin="0,0,40,0"  VerticalTextAlignment="Start" Text="Indian,Italy,Chinese Kitchen" TextColor="LightGray"/>





                        </Grid>

                    </Grid>

                </xfx:XfxCardView>

answered Nov 27 '18 at 5:15

user3452

549

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53475052%2fhow-to-set-the-perfect-corner-radius-for-the-image-inside-a-xfxcardview-in-xamar%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

Try setting the is clipped to bounds property as true in your Grid's xaml

 <Grid RowSpacing="0" IsClippedToBounds="True">

answered Nov 26 '18 at 9:27

G.hakim

4,97411136

No, it didn't fix my issue.

– user3452
Nov 26 '18 at 11:18

Why are you setting padding and margin in minus?

– G.hakim
Nov 26 '18 at 12:01

That is because the image was shown very small so I adjusted the margin and padding value to make it look bigger.

– user3452
Nov 27 '18 at 5:17

1

That is not how you do it you change the aspect of the image rather than give it all this did you try adding Aspect="AspectFit" to the image control?

– G.hakim
Nov 27 '18 at 5:52

K I'll try that.

– user3452
Nov 27 '18 at 5:53

add a comment |

Try setting the is clipped to bounds property as true in your Grid's xaml

 <Grid RowSpacing="0" IsClippedToBounds="True">

answered Nov 26 '18 at 9:27

G.hakim

4,97411136

No, it didn't fix my issue.

– user3452
Nov 26 '18 at 11:18

Why are you setting padding and margin in minus?

– G.hakim
Nov 26 '18 at 12:01

That is because the image was shown very small so I adjusted the margin and padding value to make it look bigger.

– user3452
Nov 27 '18 at 5:17

1

That is not how you do it you change the aspect of the image rather than give it all this did you try adding Aspect="AspectFit" to the image control?

– G.hakim
Nov 27 '18 at 5:52

K I'll try that.

– user3452
Nov 27 '18 at 5:53

add a comment |

Try setting the is clipped to bounds property as true in your Grid's xaml

 <Grid RowSpacing="0" IsClippedToBounds="True">

answered Nov 26 '18 at 9:27

G.hakim

4,97411136

Try setting the is clipped to bounds property as true in your Grid's xaml

 <Grid RowSpacing="0" IsClippedToBounds="True">

answered Nov 26 '18 at 9:27

G.hakim

4,97411136

answered Nov 26 '18 at 9:27

G.hakim

4,97411136

answered Nov 26 '18 at 9:27

G.hakim

4,97411136

answered Nov 26 '18 at 9:27

G.hakim

4,97411136

No, it didn't fix my issue.

– user3452
Nov 26 '18 at 11:18

Why are you setting padding and margin in minus?

– G.hakim
Nov 26 '18 at 12:01

That is because the image was shown very small so I adjusted the margin and padding value to make it look bigger.

– user3452
Nov 27 '18 at 5:17

1

That is not how you do it you change the aspect of the image rather than give it all this did you try adding Aspect="AspectFit" to the image control?

– G.hakim
Nov 27 '18 at 5:52

K I'll try that.

– user3452
Nov 27 '18 at 5:53

add a comment |

No, it didn't fix my issue.

– user3452
Nov 26 '18 at 11:18

Why are you setting padding and margin in minus?

– G.hakim
Nov 26 '18 at 12:01

That is because the image was shown very small so I adjusted the margin and padding value to make it look bigger.

– user3452
Nov 27 '18 at 5:17

1

That is not how you do it you change the aspect of the image rather than give it all this did you try adding Aspect="AspectFit" to the image control?

– G.hakim
Nov 27 '18 at 5:52

K I'll try that.

– user3452
Nov 27 '18 at 5:53

No, it didn't fix my issue.

– user3452
Nov 26 '18 at 11:18

Why are you setting padding and margin in minus?

– G.hakim
Nov 26 '18 at 12:01

That is because the image was shown very small so I adjusted the margin and padding value to make it look bigger.

– user3452
Nov 27 '18 at 5:17

That is not how you do it you change the aspect of the image rather than give it all this did you try adding Aspect="AspectFit" to the image control?

– G.hakim
Nov 27 '18 at 5:52

K I'll try that.

– user3452
Nov 27 '18 at 5:53

add a comment |

I fixed it by changing the margin of my frame. This is my code now

 <xfx:XfxCardView 

                        BackgroundColor="White"

                        CornerRadius="30" 

                    Elevation="20"

                 HeightRequest="150" IsClippedToBounds="True">

                    <Grid RowSpacing="0" >

                        <Grid ColumnSpacing="0">

                            <Grid.RowDefinitions >

                                <RowDefinition Height="*"></RowDefinition>



                                <RowDefinition Height="Auto"></RowDefinition>

                            </Grid.RowDefinitions>

                            <Grid.ColumnDefinitions >

                                <ColumnDefinition Width="*"></ColumnDefinition>

                                <ColumnDefinition Width="Auto"></ColumnDefinition>

                            </Grid.ColumnDefinitions>

                            <Frame Margin="10,10,10,20" Padding="-40" CornerRadius="10" Grid.RowSpan="3"  BackgroundColor="LightBlue"  IsClippedToBounds="True">

                                <Image Margin="-70,0,0,0"  Grid.Row="0" Grid.Column="0" Grid.RowSpan="3"  BackgroundColor="AliceBlue"  Source="restaurantimage1.jpg"  />

                            </Frame>

                            <Label Grid.Row="0" Grid.Column="1" Margin="0,30,30,0"  HorizontalOptions="Start" Text="Premera restaurant" TextColor="Black" FontFamily="Bold,20"/>

                            <Image Grid.Row="0" Grid.Column="1" Margin="0,30,10,0" HorizontalOptions="End" Source="whitehearticon3.jpg"/>

                            <Label Grid.Row="1" Grid.Column="1" Margin="0,-20,40,0"  HorizontalTextAlignment="Start" Text="Avenue Road,256" TextColor="Blue"/>

                            <Label Grid.Row="2" Grid.Column="1" Margin="0,0,40,0"  VerticalTextAlignment="Start" Text="Indian,Italy,Chinese Kitchen" TextColor="LightGray"/>





                        </Grid>

                    </Grid>

                </xfx:XfxCardView>

answered Nov 27 '18 at 5:15

user3452

549

add a comment |

I fixed it by changing the margin of my frame. This is my code now

 <xfx:XfxCardView 

                        BackgroundColor="White"

                        CornerRadius="30" 

                    Elevation="20"

                 HeightRequest="150" IsClippedToBounds="True">

                    <Grid RowSpacing="0" >

                        <Grid ColumnSpacing="0">

                            <Grid.RowDefinitions >

                                <RowDefinition Height="*"></RowDefinition>



                                <RowDefinition Height="Auto"></RowDefinition>

                            </Grid.RowDefinitions>

                            <Grid.ColumnDefinitions >

                                <ColumnDefinition Width="*"></ColumnDefinition>

                                <ColumnDefinition Width="Auto"></ColumnDefinition>

                            </Grid.ColumnDefinitions>

                            <Frame Margin="10,10,10,20" Padding="-40" CornerRadius="10" Grid.RowSpan="3"  BackgroundColor="LightBlue"  IsClippedToBounds="True">

                                <Image Margin="-70,0,0,0"  Grid.Row="0" Grid.Column="0" Grid.RowSpan="3"  BackgroundColor="AliceBlue"  Source="restaurantimage1.jpg"  />

                            </Frame>

                            <Label Grid.Row="0" Grid.Column="1" Margin="0,30,30,0"  HorizontalOptions="Start" Text="Premera restaurant" TextColor="Black" FontFamily="Bold,20"/>

                            <Image Grid.Row="0" Grid.Column="1" Margin="0,30,10,0" HorizontalOptions="End" Source="whitehearticon3.jpg"/>

                            <Label Grid.Row="1" Grid.Column="1" Margin="0,-20,40,0"  HorizontalTextAlignment="Start" Text="Avenue Road,256" TextColor="Blue"/>

                            <Label Grid.Row="2" Grid.Column="1" Margin="0,0,40,0"  VerticalTextAlignment="Start" Text="Indian,Italy,Chinese Kitchen" TextColor="LightGray"/>





                        </Grid>

                    </Grid>

                </xfx:XfxCardView>

answered Nov 27 '18 at 5:15

user3452

549

add a comment |

I fixed it by changing the margin of my frame. This is my code now

 <xfx:XfxCardView 

                        BackgroundColor="White"

                        CornerRadius="30" 

                    Elevation="20"

                 HeightRequest="150" IsClippedToBounds="True">

                    <Grid RowSpacing="0" >

                        <Grid ColumnSpacing="0">

                            <Grid.RowDefinitions >

                                <RowDefinition Height="*"></RowDefinition>



                                <RowDefinition Height="Auto"></RowDefinition>

                            </Grid.RowDefinitions>

                            <Grid.ColumnDefinitions >

                                <ColumnDefinition Width="*"></ColumnDefinition>

                                <ColumnDefinition Width="Auto"></ColumnDefinition>

                            </Grid.ColumnDefinitions>

                            <Frame Margin="10,10,10,20" Padding="-40" CornerRadius="10" Grid.RowSpan="3"  BackgroundColor="LightBlue"  IsClippedToBounds="True">

                                <Image Margin="-70,0,0,0"  Grid.Row="0" Grid.Column="0" Grid.RowSpan="3"  BackgroundColor="AliceBlue"  Source="restaurantimage1.jpg"  />

                            </Frame>

                            <Label Grid.Row="0" Grid.Column="1" Margin="0,30,30,0"  HorizontalOptions="Start" Text="Premera restaurant" TextColor="Black" FontFamily="Bold,20"/>

                            <Image Grid.Row="0" Grid.Column="1" Margin="0,30,10,0" HorizontalOptions="End" Source="whitehearticon3.jpg"/>

                            <Label Grid.Row="1" Grid.Column="1" Margin="0,-20,40,0"  HorizontalTextAlignment="Start" Text="Avenue Road,256" TextColor="Blue"/>

                            <Label Grid.Row="2" Grid.Column="1" Margin="0,0,40,0"  VerticalTextAlignment="Start" Text="Indian,Italy,Chinese Kitchen" TextColor="LightGray"/>





                        </Grid>

                    </Grid>

                </xfx:XfxCardView>

answered Nov 27 '18 at 5:15

user3452

549

I fixed it by changing the margin of my frame. This is my code now

 <xfx:XfxCardView 

                        BackgroundColor="White"

                        CornerRadius="30" 

                    Elevation="20"

                 HeightRequest="150" IsClippedToBounds="True">

                    <Grid RowSpacing="0" >

                        <Grid ColumnSpacing="0">

                            <Grid.RowDefinitions >

                                <RowDefinition Height="*"></RowDefinition>



                                <RowDefinition Height="Auto"></RowDefinition>

                            </Grid.RowDefinitions>

                            <Grid.ColumnDefinitions >

                                <ColumnDefinition Width="*"></ColumnDefinition>

                                <ColumnDefinition Width="Auto"></ColumnDefinition>

                            </Grid.ColumnDefinitions>

                            <Frame Margin="10,10,10,20" Padding="-40" CornerRadius="10" Grid.RowSpan="3"  BackgroundColor="LightBlue"  IsClippedToBounds="True">

                                <Image Margin="-70,0,0,0"  Grid.Row="0" Grid.Column="0" Grid.RowSpan="3"  BackgroundColor="AliceBlue"  Source="restaurantimage1.jpg"  />

                            </Frame>

                            <Label Grid.Row="0" Grid.Column="1" Margin="0,30,30,0"  HorizontalOptions="Start" Text="Premera restaurant" TextColor="Black" FontFamily="Bold,20"/>

                            <Image Grid.Row="0" Grid.Column="1" Margin="0,30,10,0" HorizontalOptions="End" Source="whitehearticon3.jpg"/>

                            <Label Grid.Row="1" Grid.Column="1" Margin="0,-20,40,0"  HorizontalTextAlignment="Start" Text="Avenue Road,256" TextColor="Blue"/>

                            <Label Grid.Row="2" Grid.Column="1" Margin="0,0,40,0"  VerticalTextAlignment="Start" Text="Indian,Italy,Chinese Kitchen" TextColor="LightGray"/>





                        </Grid>

                    </Grid>

                </xfx:XfxCardView>

answered Nov 27 '18 at 5:15

user3452

549

answered Nov 27 '18 at 5:15

user3452

549

answered Nov 27 '18 at 5:15

user3452

549

answered Nov 27 '18 at 5:15

user3452

549

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ytukyg