{"id":767,"date":"2017-12-23T22:24:07","date_gmt":"2017-12-23T19:24:07","guid":{"rendered":"http:\/\/enisnecipoglu.com\/?p=767"},"modified":"2018-02-03T21:52:14","modified_gmt":"2018-02-03T18:52:14","slug":"xamarin-forms-material-cards-and-animated-detail-page","status":"publish","type":"post","link":"https:\/\/enisnecipoglu.com\/en\/xamarin-forms-material-cards-and-animated-detail-page\/","title":{"rendered":"Xamarin Forms Material Cards and Animated Detail Page"},"content":{"rendered":"

 <\/p>\n

Hello Dear!<\/p>\n

There is a project about Material Style Xamarin Forms Card with XAML. It will look like that:<\/p>\n

\"Material<\/p>\n

Let’s Start<\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

Material Cards with XAML<\/h1>\n

Before we start, firstly we need to know\u00a0Frame<\/strong> control in XF has a shadow. We can use Frame to create our card.\u00a0Frame<\/strong>s has 20 Padding as Default. If you have some problems with it\u00a0 check your padding is zero or not.<\/p>\n

Our first Card will be look like that “Kangaroo Valley Safari card in that link<\/a>.<\/p>\n

So we need a Frame and some more componenets. Let’s start with a creating a Control in different file. We can use our little card in different project later. Create a Controls Folder in PCL project and Created a XAML component.<\/p>\n

 <\/p>\n

 <\/p>\n

This is our logic:<\/p>\n

\"Xamarin \"Xamarin<\/p>\n

So our XAML is look like:<\/p>\n

<!--?xml version="1.0" encoding="UTF-8"?--><\/span>
\n
\n<label<\/span>><\/<\/span>label<\/span>><\/span>
\n<label<\/span>><\/<\/span>label<\/span>><\/span>
\n<label<\/span>><\/<\/span>label<\/span>><\/span>
\n
\n<label<\/span>><\/<\/span>label<\/span>><\/span>
\n<label<\/span>><\/<\/span>label<\/span>><\/span><\/div><\/div>\n

And we need something to add with CS like giving a ratio to our image (16:9)<\/p>\n

Cs file will be like:<\/p>\n

public<\/span> partial<\/span> class<\/span> CardView :<\/span> Frame
\n{<\/span>
\npublic<\/span> CardView(<\/span>)<\/span>
\n{<\/span>
\nInitializeComponent(<\/span>)<\/span>;<\/span>
\n}<\/span>
\n
\nprotected<\/span> override<\/span> void<\/span> OnSizeAllocated(<\/span>double<\/span> width, double<\/span> height)<\/span>
\n{<\/span>
\nbase<\/span>.<\/span>OnSizeAllocated<\/span>(<\/span>width, height)<\/span>;<\/span>
\nboxCardColor.<\/span>HeightRequest<\/span> =<\/span> boxCardColor.<\/span>Width<\/span> \/<\/span> 16<\/span> *<\/span> 9<\/span>;<\/span>
\nimgCard.<\/span>HeightRequest<\/span> =<\/span> imgCard.<\/span>Width<\/span> \/<\/span> 16<\/span> *<\/span> 9<\/span>;<\/span>
\n
\n}<\/span>
\n
\nprivate<\/span> void<\/span> Card_Tapped(<\/span>object<\/span> sender, EventArgs e)<\/span>
\n{<\/span>
\nNavigation.<\/span>PushAsync<\/span>(<\/span>new<\/span> Views.<\/span>CardDetail<\/span>(<\/span>)<\/span>)<\/span>;<\/span> \/\/we'll that page later<\/span>
\n}<\/span>
\n}<\/span><\/div><\/div>\n

 <\/p>\n

Our Card is ready. Let’s try it. Create a\u00a0Views<\/strong> folder and Create a\u00a0ContentPage which named as\u00a0CardsPage<\/strong>. So we need to call our\u00a0Controls\u00a0<\/strong>namespace in XAML. I’ve added that line into ContentPage tag<\/p>\n

xmlns:controls=”clr-namespace:MaterialImageAndText.Controls”<\/p>\n

 <\/p>\n

finally that page’s XAML will be that:<\/p>\n

<!--?xml version="1.0" encoding="utf-8" ?--><\/span><\/div><\/div>\n

It’s easy. We got that view on screen:<\/p>\n

\"Xamarin<\/p>\n

Material Detail Page with XAML<\/h1>\n

Firsly we need to understand the logic again.\u00a0Grid\u00a0<\/strong>allows exacty allocate componenets. And if you put more componenets than one in same cell in grid, last componenet will be paced the top. In that logic I’ll put my Image first to place bottom and my content will be drawing on Image. When I scroll the page Content will be able to move over Image. And The lastly, My float button will be toppest.<\/p>\n

For the understanding\u00a0\u00a0Grid<\/strong> logic and Material Design. We need not to think Horizontal or Vertical, We need to thing depth.<\/p>\n

\"Xamarin<\/p>\n

Let’s start to build that Design with XAML. I’ve created a ContentPage and named it\u00a0as\u00a0“CardDetail”<\/strong> in Views folder. XAML page looks like :<\/p>\n

<!--?xml version<\/span>="1.0"<\/span> encoding<\/span>="utf-8"<\/span> ?--><\/span>
\n&nbsp;
\n
\n<label><\/span><\/span><\/label><\/span><\/span>
\n<label><\/span><\/span><\/label><\/span><\/span>
\n
\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nulla ligula, viverra ac dictum ac, pellentesque ut est. Quisque sapien lorem, iaculis sed lacinia vel, fringilla et tellus. Fusce auctor tincidunt felis. Ut faucibus ultricies nisi, vitae tristique mauris aliquet vel. Cras vel congue risus. Sed sodales ultrices risus, eu convallis tortor luctus id. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ultricies pretium ultrices. Quisque rutrum feugiat ante. Donec nec purus facilisis, convallis diam vitae, condimentum nibh. Ut tincidunt, sapien in porttitor ultrices, lacus orci sagittis metus, at hendrerit arcu metus sed tortor.
\n
\n&nbsp;
\n
\n&nbsp;
\n
\n&nbsp;<\/div><\/div>\n

 <\/p>\n

All the things will be placed over and over. We need a alignment with CS. Just override\u00a0OnSizeAllocated<\/strong> and use that codes:<\/p>\n

protected<\/span> override<\/span> void<\/span> OnSizeAllocated(<\/span>double<\/span> width, double<\/span> height)<\/span>
\n{<\/span>
\nbase<\/span>.<\/span>OnSizeAllocated<\/span>(<\/span>width, height)<\/span>;<\/span>
\nimgCard.<\/span>HeightRequest<\/span> =<\/span> imgCard.<\/span>Width<\/span> *<\/span> 2<\/span> \/<\/span> 3<\/span>;<\/span> \/\/ set the height of Image to 3:2 Ratio<\/span>
\n
\n\/\/This keeps all margin as same value which given from XAML. Only changes Top Margin as Image height<\/span>
\ngrdContentArea.<\/span>Margin<\/span> =<\/span> new<\/span> Thickness(<\/span>grdContentArea.<\/span>Margin<\/span>.<\/span>Left<\/span>, imgCard.<\/span>Height<\/span>, grdContentArea.<\/span>Margin<\/span>.<\/span>Right<\/span>, grdContentArea.<\/span>Margin<\/span>.<\/span>Bottom<\/span>)<\/span>;<\/span>
\n
\n\/\/Set the content height as scrollable<\/span>
\ngrdContentArea.<\/span>HeightRequest<\/span> =<\/span> grdContentArea.<\/span>Height<\/span> &<\/span>gt;<\/span> this<\/span>.<\/span>Height<\/span> ?<\/span> grdContentArea.<\/span>Height<\/span> :<\/span> this<\/span>.<\/span>Height<\/span>;<\/span>
\n
\n\/\/boxCardColor.HeightRequest = boxCardColor.Width \/ 16 * 9;<\/span>
\n}<\/span><\/div><\/div>\n

 <\/p>\n

And we need animation now. Our animation depends on scroll gestures. Image will be go up when user scrolled down but not same ratio with scrolling. Our ratio is half of scroll. And for the float button that ratio is 20% of scrolled value.<\/p>\n

Finally CS file will be like:<\/p>\n

public<\/span> partial<\/span> class<\/span> CardDetail :<\/span> ContentPage
\n{<\/span>
\npublic<\/span> CardDetail(<\/span>)<\/span>
\n{<\/span>
\nInitializeComponent(<\/span>)<\/span>;<\/span>
\n
\n}<\/span>
\n
\nprotected<\/span> override<\/span> void<\/span> OnSizeAllocated(<\/span>double<\/span> width, double<\/span> height)<\/span>
\n{<\/span>
\nbase<\/span>.<\/span>OnSizeAllocated<\/span>(<\/span>width, height)<\/span>;<\/span>
\nimgCard.<\/span>HeightRequest<\/span> =<\/span> imgCard.<\/span>Width<\/span> *<\/span> 2<\/span> \/<\/span> 3<\/span>;<\/span> \/\/ set the height of Image to 3:2 Ratio<\/span>
\n
\n\/\/This keeps all margin as same value which given from XAML. Only changes Top Margin as Image height<\/span>
\ngrdContentArea.<\/span>Margin<\/span> =<\/span> new<\/span> Thickness(<\/span>grdContentArea.<\/span>Margin<\/span>.<\/span>Left<\/span>, imgCard.<\/span>Height<\/span>, grdContentArea.<\/span>Margin<\/span>.<\/span>Right<\/span>, grdContentArea.<\/span>Margin<\/span>.<\/span>Bottom<\/span>)<\/span>;<\/span>
\n
\n\/\/Set the content height as scrollable<\/span>
\ngrdContentArea.<\/span>HeightRequest<\/span> =<\/span> grdContentArea.<\/span>Height<\/span> &<\/span>gt;<\/span> this<\/span>.<\/span>Height<\/span> ?<\/span> grdContentArea.<\/span>Height<\/span> :<\/span> this<\/span>.<\/span>Height<\/span>;<\/span>
\n
\n\/\/boxCardColor.HeightRequest = boxCardColor.Width \/ 16 * 9;<\/span>
\n}<\/span>
\n
\nprivate<\/span> void<\/span> ScrollView_Scrolled(<\/span>object<\/span> sender, ScrolledEventArgs e)<\/span>
\n{<\/span>
\nimgCard.<\/span>TranslateTo<\/span>(<\/span>0<\/span>, -<\/span>1<\/span> *<\/span> (<\/span>e.<\/span>ScrollY<\/span> \/<\/span> 2<\/span>)<\/span>, 2<\/span>)<\/span>;<\/span>
\nif<\/span> (<\/span>e.<\/span>ScrollY<\/span> &<\/span>lt;<\/span> imgCard.<\/span>Height<\/span>)<\/span>
\n{<\/span>
\nimgFloatButton.<\/span>TranslateTo<\/span>(<\/span>0<\/span>,e.<\/span>ScrollY<\/span> \/<\/span>5<\/span>, 25<\/span>)<\/span>;<\/span>
\n}<\/span>
\nelse<\/span>
\n{<\/span>
\nimgFloatButton.<\/span>TranslateTo<\/span>(<\/span>0<\/span>, this<\/span>.<\/span>Height<\/span> -<\/span> imgFloatButton.<\/span>Height<\/span>, 100<\/span>)<\/span>;<\/span>
\n}<\/span>
\n
\n}<\/span>
\n}<\/span><\/div><\/div>\n

 <\/p>\n

And it’s ready!!<\/p>\n

Awesome Material Design.<\/p>\n

Source code and Sample project is available on my Git.hub<\/p>\n

There is a link you can download<\/p>\n

https:\/\/github.com\/enisn\/Xamarin-Forms-Material-Cards<\/a><\/p>","protected":false},"excerpt":{"rendered":"  Hello Dear! There is a project about Material Style Xamarin Forms Card with XAML. It will look like that: Let’s Start             Material Cards with XAML Before we start, firstly we need to know\u00a0Frame control in XF has a shadow. We can use Frame to create our card.\u00a0Frames has 20 Padding as Default. If you have some problems with it\u00a0 check your padding is zero or not. Our first Card will be look like that “Kangaroo Valley Safari card in that link. So we need a Frame and some more componenets. Let’s start with a creating a Control in different file. We can use our little card in different project later. Create a Controls Folder in PCL project and Created a XAML component.     This is our logic: So our XAML is look like: <!–?xml version="1.0" encoding="UTF-8"?–> <label><\/label> <label><\/label> <label><\/label> <label><\/label> <label><\/label> And we need something to add with CS like giving a ratio to our image (16:9) Cs file will be like: public partial class CardView : Frame { public CardView() { InitializeComponent(); } protected override void OnSizeAllocated(double width, double height) { base.OnSizeAllocated(width, height); boxCardColor.HeightRequest = boxCardColor.Width \/ 16 * 9; imgCard.HeightRequest = imgCard.Width \/ 16 * 9; } private void Card_Tapped(object sender, EventArgs e) { Navigation.PushAsync(new Views.CardDetail()); \/\/we’ll that page later } }   Our Card is ready. Let’s try it. Create a\u00a0Views folder and Create a\u00a0ContentPage which named as\u00a0CardsPage. So we need to call our\u00a0Controls\u00a0namespace in XAML. I’ve added that line into ContentPage tag xmlns:controls=”clr-namespace:MaterialImageAndText.Controls”   finally that page’s XAML will be that: <!–?xml version="1.0" encoding="utf-8" ?–> It’s easy. We got that view on screen: Material Detail Page with XAML Firsly we need to understand the logic again.\u00a0Grid\u00a0allows exacty allocate componenets. And if you put more componenets than one in same cell in grid, last componenet will be paced the top. In that logic I’ll put my Image first to place bottom and my content will be drawing on Image. When I scroll the page Content will be able to move over Image. And The lastly, My float button will be toppest. For the understanding\u00a0\u00a0Grid logic and Material Design. We need not to think Horizontal or Vertical, We need to thing depth. Let’s start to build that Design with XAML. I’ve created a ContentPage and named it\u00a0as\u00a0“CardDetail” in Views folder. XAML page looks like : <!–?xml version="1.0" encoding="utf-8" ?–> &nbsp; ","protected":false},"author":1,"featured_media":777,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[20,4,15,6],"tags":[34,28,29],"_links":{"self":[{"href":"https:\/\/enisnecipoglu.com\/en\/wp-json\/wp\/v2\/posts\/767"}],"collection":[{"href":"https:\/\/enisnecipoglu.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/enisnecipoglu.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/enisnecipoglu.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/enisnecipoglu.com\/en\/wp-json\/wp\/v2\/comments?post=767"}],"version-history":[{"count":14,"href":"https:\/\/enisnecipoglu.com\/en\/wp-json\/wp\/v2\/posts\/767\/revisions"}],"predecessor-version":[{"id":874,"href":"https:\/\/enisnecipoglu.com\/en\/wp-json\/wp\/v2\/posts\/767\/revisions\/874"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/enisnecipoglu.com\/en\/wp-json\/wp\/v2\/media\/777"}],"wp:attachment":[{"href":"https:\/\/enisnecipoglu.com\/en\/wp-json\/wp\/v2\/media?parent=767"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/enisnecipoglu.com\/en\/wp-json\/wp\/v2\/categories?post=767"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/enisnecipoglu.com\/en\/wp-json\/wp\/v2\/tags?post=767"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}