AspectFill Slide View Images

[Pramod]

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.

[Lance | Senior Manager Technical Support]

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

[Pramod]

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 

[Lance | Senior Manager Technical Support]

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

[Pramod]

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

[Lance | Senior Manager Technical Support]

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

[Lance | Senior Manager Technical Support]

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

[Manish]

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 

[Lance | Senior Manager Technical Support]

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