Tile View does not display Large Image

[niki4os]

Hi,
I desire to display images from a database within a service. When i load the images i can show them in restore mode. But when i click an item to display the large image the image can not be shown. When i click another image to display in maximize mode in the transition time i can see the maximized image less than 1 second.

    <UserControl.Resources>
        <uc:BytesToImageConverter x:Key="xresBytes2Bitmap" />
 
        <tileview:TileToFluideStateConverter x:Key="tileConverter" />
 
        <SolidColorBrush x:Key="newForeground" tel:MetroColors.Color="Accent" />
    </UserControl.Resources>
 
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="50" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
 
        <StackPanel Grid.Row="0" Margin="3" Orientation="Horizontal">
            <TextBlock Text="TileStateChangeTrigger" />
            <tel:RadComboBox x:Name="xamlStateChangeOption" Margin="0 2" SelectedIndex="2">
                <tel:TileStateChangeTrigger>None</tel:TileStateChangeTrigger>
                <tel:TileStateChangeTrigger>SingleClick</tel:TileStateChangeTrigger>
                <tel:TileStateChangeTrigger>DoubleClick</tel:TileStateChangeTrigger>
            </tel:RadComboBox>
 
            <TextBlock Margin="0 5 0 0" Text="MaximizeMode" />
            <tel:RadComboBox x:Name="xamlMaximizeModeOption" Margin="0 2" SelectedIndex="1">
                <tel:TileViewMaximizeMode>Zero</tel:TileViewMaximizeMode>
                <tel:TileViewMaximizeMode>ZeroOrOne</tel:TileViewMaximizeMode>
                <tel:TileViewMaximizeMode>One</tel:TileViewMaximizeMode>
            </tel:RadComboBox>
 
            <CheckBox x:Name="xamlIsItemDraggingEnabledOption" Margin="0 2" Content="IsItemDraggingEnabled" IsChecked="True" />
 
            <CheckBox x:Name="xamlPreservePositionWhenMaximizedOption" Margin="0 2" Content="PreservePositionWhenMaximized" IsChecked="True" />
        </StackPanel>
 
        <tel:RadTileView x:Name="xamlTileView" Grid.Row="1" ItemsSource="{Binding}"  MaxColumns="3"
            IsAutoScrollingEnabled="True" Margin="0" IsVirtualizing="True"
            IsItemDraggingEnabled="{Binding ElementName=xamlIsItemDraggingEnabledOption,Path=Checked}"
            MinimizedColumnWidth="350" MinimizedRowHeight="200" RowHeight="200" ColumnWidth="200"
            MaximizeMode="{Binding ElementName=xamlMaximizeModeOption,Path=SelectedItem}"
            PreservePositionWhenMaximized="{Binding ElementName=xamlPreservePositionWhenMaximizedOption,Path=Checked}"
            TileStateChanged="xamlTileView_TileStateChanged" 
        >
            <!--header-->
            <tel:RadTileView.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <TextBlock Text="{Binding Path=Title}" />
                    </StackPanel>
                </DataTemplate>
            </tel:RadTileView.ItemTemplate>
            <!--data-->
            <tel:RadTileView.ContentTemplate>
                <!--<DataTemplate>
                    <StackPanel>
                        <TextBlock Text="{Binding Path=Position}" />
                        <TextBlock Text="{Binding Path=TitleSEO}" />
                        <TextBlock Text="{Binding Path=Title}" />
                        <TextBlock Text="{Binding Path=Tags}" />
                    </StackPanel>
                </DataTemplate>-->
 
                <DataTemplate>
 
                    <tel:RadFluidContentControl  Height="Auto" Width="Auto" ContentChangeMode="Manual"  >
                        <tel:RadFluidContentControl.Content>
                            <Border>
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto" />
                                        <RowDefinition Height="Auto" />
                                    </Grid.RowDefinitions>
 
                                    <Image x:Name="xamlImage"  Stretch="Uniform"   Grid.Row="0" Source="{Binding Path=BLOB, Converter={StaticResource xresBytes2Bitmap}}" />
                                    <TextBlock  Grid.Row="1" Text="{Binding Path=Title}"/>
                                </Grid>
                            </Border>
                        </tel:RadFluidContentControl.Content>
                        <tel:RadFluidContentControl.LargeContent>
 
                            <Grid Background="Transparent">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="0.75*" />
                                    <ColumnDefinition Width="0.25*" />
                                </Grid.ColumnDefinitions>
                                <Image Grid.Column="0"  Stretch="Uniform" Source="{Binding Path=BLOB, Converter={StaticResource xresBytes2Bitmap}}" />
                                <!--<Image Grid.Column="0"  Stretch="Uniform" Source="{Binding ElementName=xamlImage,Path=Source}" />-->
 
                                <StackPanel Grid.Column="1">
                                    <TextBlock Text="{Binding Path=TitleSEO}" />
                                </StackPanel>
                            </Grid>
 
                        </tel:RadFluidContentControl.LargeContent>
                    </tel:RadFluidContentControl>
                </DataTemplate>
            </tel:RadTileView.ContentTemplate>
        </tel:RadTileView>
    </Grid>

I have to declare that image has one size and i want to resize automatically when i click to maximize it.

[Vladislav]

Hello Kiki,

In order to implement the desired behavior you should change dynamically the state of the RadFluidContentControl based on the state of the corresponding RadTileViewItem.
Basically there are two possible approaches to your scenario:
1. To change the RadFluidContentControl state in the "TileStateChanged" event handler. This approach is described in this help article.
2. To bind the RadFluidContentControl's state to the RadTileViewItem's state via converter. This approach is described in this help article.

Can you please try one of the suggested approaches and let us know if they satisfy your needs?

All the best,
Vladislav
the Telerik team