[Solved] My RadSlideHubTile is rotating rather than sliding?

[Alistair]

Hi there,

I need some help please, I am trying to use the RadSlideHubTile and for some reason my example tiles do not appear to be sliding. Instead the top content appears to flip to show the back content, on alternative cycles the back content moves between the middle and bottom of the tile.  The intermediate state of the slide tile does not seem to combine both front and back of the tile. My images are JPG if that makes any difference.  I've attached a couple of screenshots to demonstrate.

I have my Telerik:RadSlideHubTile defined with a DataTemplate which is then used by the items of a GridView.  If my model has an image associated with the Item then the RadSlideHubTile is displayed, otherwise a plain RadHubTile is displayed. 

DataTemplate

<DataTemplate x:Key="RadFormItemTemplate">
    <StackPanel Orientation="Vertical">
    <Telerik:RadSlideHubTile Width="200" Height="150" Visibility="{Binding ImageName, Converter={StaticResource DataToVisibilityConverter}}" UpdateInterval="0:0:2">
        <!--<Telerik:RadSlideHubTile.Background>
            <SolidColorBrush Color="{StaticResource OR_Purple_Alt}"/>
        </Telerik:RadSlideHubTile.Background>-->

        <Telerik:RadSlideHubTile.TopContent>
                <TextBlock Text="{Binding Title}" Style="{StaticResource ItemTextStyle}" HorizontalAlignment="Left" VerticalAlignment="Bottom" FontSize="22" FontWeight="Light" Margin="12,12,12,12"/>
        </Telerik:RadSlideHubTile.TopContent>

        <Telerik:RadSlideHubTile.BackContent>
            <!--<TextBlock Text="Fancy image here" Style="{StaticResource ItemTextStyle}"/>-->
            <Image Source="{Binding ImageName, Converter={StaticResource HubTileConverter}}" Stretch="Fill" />
        </Telerik:RadSlideHubTile.BackContent>
    </Telerik:RadSlideHubTile>

        <Telerik:RadHubTile Width="200" Height="150" Visibility="{Binding ImageName, Converter={StaticResource InvDataToVisibilityConverter}}"
                            Title="{Binding Title}">
            <Telerik:RadHubTile.Background>
                <SolidColorBrush Color="{StaticResource OR_Purple_Alt}"/>
            </Telerik:RadHubTile.Background>
        </Telerik:RadHubTile>
    </StackPanel>
</DataTemplate>

GridView

<GridView x:Name="itemGridView"
                AutomationProperties.AutomationId="ItemGridView"
                AutomationProperties.Name="Grouped Items"
                Grid.RowSpan="2"
                Padding="0,0,0,0"
                Grid.Row="2"
                Grid.Column="1"
                ItemsSource="{Binding Source={StaticResource cvsForms}}"
                ItemTemplate="{StaticResource RadFormItemTemplate}"
                SelectionMode="Single"
                SelectedItem="{Binding SelectedForm, Mode=TwoWay}"
                IsSwipeEnabled="false"
                IsItemClickEnabled="True"
                IsSynchronizedWithCurrentItem="{x:Null}" Margin="120,0,0,0" ItemClick="ItemView_ItemClick">


            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>

            <GridView.GroupStyle>
                <GroupStyle HidesIfEmpty="False">
                    <GroupStyle.HeaderTemplate>
                        <DataTemplate>
                            <Grid Margin="1,0,0,5">
                                <Button AutomationProperties.Name="Group Title" Style="{StaticResource TextPrimaryButtonStyle}">
                                    <StackPanel Orientation="Horizontal" >
                                        <TextBlock Text="{Binding Name}" Margin="3,-7,10,10" Style="{StaticResource GroupHeaderTextStyle}"/>
                                        <TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="0,-7,0,10" Style="{StaticResource GroupHeaderTextStyle}"/>
                                    </StackPanel>
                                </Button>
                            </Grid>
                        </DataTemplate>
                    </GroupStyle.HeaderTemplate>

                    <GroupStyle.Panel>
                        <ItemsPanelTemplate>
                            <VariableSizedWrapGrid />
                        </ItemsPanelTemplate>
                    </GroupStyle.Panel>
                </GroupStyle>
            </GridView.GroupStyle>
        </GridView>

Thanks in advance for any help,

Alistair.

[Ivaylo Gergov]

Hi,

Thank you for your interest.

By specification, the RadSlideHubTile slides between the TopContent and the BottomContent. The BackContent can only be showed through a flip animation. So, in your case, you just have to replace the BackContent with a BottomContent.

I hope this helps.


Regards,
Ivaylo Gergov
Telerik

[Alistair]

Thanks a lot for the help! So obvious when you see it and know what to look for.
App now looks great. =)

Alistair.