AspectFill Slide View Images

9 posts, 1 answers
  1. Pramod
    Pramod avatar
    6 posts
    Member since:
    Feb 2018

    Posted 02 Apr 2018 Link to this post

    Hi Team,

     I am included images in Rad Slide View But it takes default image size for slide view.

    How i can that image FillAndExpand or AspectFit for Slide view.

     

    Regards,

    Pramod M.

  2. Answer
    Lance | Technical Support Engineer, Principal
    Admin
    Lance | Technical Support Engineer, Principal avatar
    1022 posts

    Posted 02 Apr 2018 Link to this post

    Hi Pramod,

    Set the HorizontalContentOptions and VerticalContentOptions properties of the RadSlideView to the option of your choice.

    Regards,
    Lance | Tech Support Engineer, Sr.
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Pramod
    Pramod avatar
    6 posts
    Member since:
    Feb 2018

    Posted 03 Apr 2018 Link to this post

    Hi Lance, 

    Yes it worked but the thing is the image inside the item template which was earlier inside a frame and was having round corner is not working now, means if I am using this approach round corner is not working can you please help me out with this too? 

    Thanks
    Pramod 
  4. Lance | Technical Support Engineer, Principal
    Admin
    Lance | Technical Support Engineer, Principal avatar
    1022 posts

    Posted 03 Apr 2018 Link to this post

    Hello Pramod,

    There is no property on the SlideView that sets corner radius, so the issue shouldn't be related to the RadSlideView. I would play with your custom content's margin or padding to ensure that the elements are not being drawn outside of the parent container.

    Regards,
    Lance | Tech Support Engineer, Sr.
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Pramod
    Pramod avatar
    6 posts
    Member since:
    Feb 2018

    Posted 04 Apr 2018 in reply to Lance | Technical Support Engineer, Principal Link to this post

    Yes I am not looking for a round corner property in RadSlide but the thing is I am already having my custom layout with round corners by using frames but when I use the SetContentHeight to Fill and Expand in RadSlide it removes my round corner you can reproduce that issue at your end also if I don’t use that property of RadSlide my corner of custom template remains intact and unchanged 

     

    Thanks & Regards,

    Pramod M

  6. Lance | Technical Support Engineer, Principal
    Admin
    Lance | Technical Support Engineer, Principal avatar
    1022 posts

    Posted 04 Apr 2018 Link to this post

    Hello Pramod,

    Thank your for the additional summary, I do understand what you're describing. I just wanted to be clear that we do not adjust any of the ItemTemplate's controls or properties. Whatever you put inside that ContentView remains the same, regardless of the ContentOptions value, so your CornerRadius is still there.

    You just might not be able to see it because it's outside the bounds of the container. What I'm suggesting is for you to add a test margin to your content so that everything will be visible, including the Frame's rounded corners.Then decrease the Margin value until you see where it no longer appears.

    <telerikPrimitives:RadSlideView x:Name="slideView">
        <telerikPrimitives:RadSlideView.ItemTemplate>
            <DataTemplate>
                <ContentView>
                    <Frame Margin="20" />
                </ContentView>
            </DataTemplate>
        </telerikPrimitives:RadSlideView.ItemTemplate>
    </telerikPrimitives:RadSlideView>

    Did you try this? What were the results? What if you increase the margin to 50? What happens when you add a temporary BackGroundColor to the different parts of your content so that you can see where they're laid out?

    As far as replicating the issue, please open a support ticket and attach your runnable reproducible application so that the developers can investigate further. Without seeing your code, or being able to replicate the problem, they won't be able to determine what's wrong.

    Regards,
    Lance | Tech Support Engineer, Sr.
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  7. Lance | Technical Support Engineer, Principal
    Admin
    Lance | Technical Support Engineer, Principal avatar
    1022 posts

    Posted 04 Apr 2018 Link to this post

    Hello Pramod,

    I wanted to follow up to explain further on what I mean by adding colors so you can see what's going on. 

    Notice the following XAML has a Frame with a dark background color and a corner radius:

    <telerikPrimitives:RadSlideView ItemsSource="{Binding Items}"
                                    IsAnimated="True"
                                    ShowButtons="False"
                                    VerticalOptions="FillAndExpand"
                                    HorizontalOptions="FillAndExpand"
                                    HorizontalContentOptions="Fill"
                                    VerticalContentOptions="Fill">
        <telerikPrimitives:RadSlideView.ItemTemplate>
            <DataTemplate>
                <ContentView>
                    <Frame BackgroundColor="DarkBlue"
                        CornerRadius="30">
                        <Label Text="{Binding Title}"
                               TextColor="White"
                               FontAttributes="Bold"
                               HorizontalOptions="Center"
                               VerticalOptions="Center"
                               Margin="20" />
                    </Frame>
                </ContentView>
            </DataTemplate>
        </telerikPrimitives:RadSlideView.ItemTemplate>
    </telerikPrimitives:RadSlideView>


    Here's the result at runtime, notice you can clearly see the radius on all four corners.



    Regards,
    Lance | Tech Support Engineer, Sr.
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  8. Manish
    Manish avatar
    1 posts
    Member since:
    Apr 2018

    Posted 10 Apr 2018 in reply to Lance | Technical Support Engineer, Principal Link to this post

    Hey Lance, 

    I am facing the same issue, here is my following code, the round corner for the image is not working if I am using 
    Hey Lance, 

    I am facing the same issue, here is my following code, the round corner for the image is not working if I am
    using VerticalContentOptions & HorizontalContentOptions to FillAndExpand. 

     <telerikPrimitives:RadSlideView Grid.Row="0"  Orientation="Horizontal" 
                        ItemsSource="{Binding MyImageSizeDetailCollection}"
                                                    x:Name="slideView"
                                                    SelectedIndicatorColor="White"
                                                    IsInfiniteScrollingEnabled="True"
                                                    ShowButtons="{Binding DOHideArrows}" 
                                                    ShowIndicators="{Binding DOHideArrows}" 
                             SlideButtonsColor="White" 
                            VerticalContentOptions= "FillAndExpand" HorizontalContentOptions="FillAndExpand">



                        <telerikPrimitives:RadSlideView.ItemTemplate>
                            <DataTemplate>
     <ffimageloading:CachedImage Source="{Binding Url}"  Grid.Row="0"
                                 VerticalOptions = "FillAndExpand" HorizontalOptions = "FillAndExpand"
                                    Aspect="AspectFill" DownsampleToViewSize="true"
    >
                                    <ffimageloading:CachedImage.Transformations>
                                    <fftransformations:RoundedTransformation Radius="30"/>
                                    </ffimageloading:CachedImage.Transformations>
                                    </ffimageloading:CachedImage>
    </DataTemplate>
                        </telerikPrimitives:RadSlideView.ItemTemplate>
                    </telerikPrimitives:RadSlideView>
     <telerikPrimitives:RadSlideView Grid.Row="0"  Orientation="Horizontal" 
                        ItemsSource="{Binding MyImageSizeDetailCollection}"
                                                    x:Name="slideView"
                                                    SelectedIndicatorColor="White"
                                                    IsInfiniteScrollingEnabled="True"
                                                    ShowButtons="{Binding DOHideArrows}" 
                                                    ShowIndicators="{Binding DOHideArrows}" 
                             SlideButtonsColor="White" 
                            VerticalContentOptions= "FillAndExpand" HorizontalContentOptions="FillAndExpand">



                        <telerikPrimitives:RadSlideView.ItemTemplate>
                            <DataTemplate>
     <ffimageloading:CachedImage Source="{Binding Url}"  Grid.Row="0"
                                 VerticalOptions = "FillAndExpand" HorizontalOptions = "FillAndExpand"
                                    Aspect="AspectFill" DownsampleToViewSize="true"
    >
                                    <ffimageloading:CachedImage.Transformations>
                                    <fftransformations:RoundedTransformation Radius="30"/>
                                    </ffimageloading:CachedImage.Transformations>
                                    </ffimageloading:CachedImage>

    </DataTemplate>
                        </telerikPrimitives:RadSlideView.ItemTemplate>
                    </telerikPrimitives:RadSlideView>

     

     

    Thanks
    Manish 

  9. Lance | Technical Support Engineer, Principal
    Admin
    Lance | Technical Support Engineer, Principal avatar
    1022 posts

    Posted 10 Apr 2018 Link to this post

    Hello Manish,

    Unfortunately, something went wrong when you copied in your code, it is not valid XAML. However, I was able to make some educated guesses on the setup and have a suspicion as to what might be happening.

    I would look at the FFImageLoading's CachedImage Aspect property, AspectFill means that the image is going to be scaled to fit the view and whatever doesn't fit will be clipped.. If the image's aspect fits the height of the visible area, then the corners of the image will sometimes be outside the visible area of the SlideView, thus are clipped.

    Here's a quick mock-up of what I mean:



    The solution would be to use a different Aspect so that all corners of the image are visible, then you'll see the FFImageLoading Transform.

    Regards,
    Lance | Tech Support Engineer, Sr.
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top