Tile View does not display Large Image

2 posts, 0 answers
  1. niki4os
    niki4os avatar
    1 posts
    Member since:
    Jun 2012

    Posted 30 Aug 2012 Link to this post

    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.
  2. Vladislav
    Admin
    Vladislav avatar
    276 posts

    Posted 04 Sep 2012 Link to this post

    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.

  3. DevCraft banner
Back to Top