locked
How to place a image in the half of a frame using Xamarin forms RRS feed

  • Question

  • User365150 posted

    Hi, I want to place a image in the half of a frame in my app , i am using xamarin forms to do this ,How can I do this

    Please Help me

    My Xaml

      <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="StartAndExpand" >
                    <ListView x:Name="lv_search" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" RowHeight="175" SeparatorColor="White">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>
                                 <AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="StartAndExpand" >
              <Frame  BackgroundColor="White" HorizontalOptions="FillAndExpand" VerticalOptions="StartAndExpand" Margin="20,10,0,0"
                                      HeightRequest="75" AbsoluteLayout.LayoutBounds="0.01,0.9,1,1" AbsoluteLayout.LayoutFlags="All">
                                            <Image Source="img_frm" BackgroundColor="#14559a" AbsoluteLayout.LayoutBounds="0.009,0.9,0.3,0.6" AbsoluteLayout.LayoutFlags="All"  />
                                            <StackLayout Orientation="Horizontal"  HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand">
                                                <AbsoluteLayout  HorizontalOptions="StartAndExpand">
                                                <Image Source="ellipse_1" VerticalOptions="CenterAndExpand" HorizontalOptions="Start" AbsoluteLayout.LayoutFlags="All"
                                                       AbsoluteLayout.LayoutBounds="0.01,0.4,1,1" HeightRequest="100" WidthRequest="100" BackgroundColor="White">
    
                                                </Image>
    
                                                <Image Source="{Binding Image}" AbsoluteLayout.LayoutBounds="0.02,0.4,1,1" AbsoluteLayout.LayoutFlags="All"
                                                       HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"  ></Image>
                                                </AbsoluteLayout>
    
                                                <Label x:Name="lbl_categories" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand"  Margin="10,0,0,0" 
                                                       TextColor="Black"   Text="{Binding Title}" LineBreakMode="WordWrap"  HorizontalTextAlignment="Start"
                                                       FontSize="Medium" FontAttributes="Bold" AbsoluteLayout.LayoutBounds="0.3,0.3,1,1" AbsoluteLayout.LayoutFlags="All"/>
    
                                                <Image HorizontalOptions="EndAndExpand" VerticalOptions="Center" Source="arrow"  AbsoluteLayout.LayoutBounds="0.9,0.3,0.3,0.3"
                                                    AbsoluteLayout.LayoutFlags="All" />
                                            </StackLayout>
                                        </Frame>
    
                                    </AbsoluteLayout>
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
    

    But it dosen't develop the design what I want.

    Actually I want a design like this

    Thursday, June 21, 2018 5:04 AM

All replies

  • User329247 posted

    You can use Grid Layout with one row and four columns(Blue bar, Image, Text, Arrow) and adjust the column width according to your requirement, inside List viewcell. Hope this may solve your issue.

    Thursday, June 21, 2018 6:18 AM