This is a migrated thread and some comments may be shown as answers.

Tile View does not display Large Image

1 Answer 83 Views
TileView
This is a migrated thread and some comments may be shown as answers.
niki4os
Top achievements
Rank 1
niki4os asked on 30 Aug 2012, 11:31 AM
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.

1 Answer, 1 is accepted

Sort by
0
Vladislav
Telerik team
answered on 04 Sep 2012, 08:13 AM
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

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Tags
TileView
Asked by
niki4os
Top achievements
Rank 1
Answers by
Vladislav
Telerik team
Share this question
or