[Solved] How to set fixed size distance for the space surrounding images inside coverflow(after growing the window containing converflow)

[Edward Pauley]

Hi 
in my current window, i have a coverflow at top and some textboxes are below it.
I set the size of the coverflow section is auto-grow corresponding to the grow of the window which contains the coverflow
the section of the textboxes are fixed size

my problem right now is that no matter which settings i have tried for the coverflow, i can't set the fixed size for the space surrounding the images inside my coverflow .

the reason why i have to find a solution for it is that when my window is expanded , i saw a big white space surrounding my images
this is really bad for me

My pictures will show you


Note: if you look at my code, inside the datatemplate of the image. I set the FIXED size for my images which are loaded dynamically from database. I think this might be the main reason for my current behavior. I tried to find a way to set my image datatemplate to auto-grow size like "400*" but it doesn't work

<telerik:RadWindow x:Class="SilverFinancials.Windows.Enterprise.R_D.ImageGalleryScreen"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                   xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
                   xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
                   xmlns:my="clr-namespace:SilverFinancials.Web.Services"
                   xmlns:converter ="clr-namespace:SilverFinancials.Converter"
                   Header="Image Gallery"
                   xmlns:navigation ="clr-namespace:SilverFinancials"
    d:DesignHeight="498" d:DesignWidth="766" Width="845" Height="537">
    <telerik:RadBusyIndicator Name="busyIndicator">
    <Grid x:Name="LayoutRoot" Background="Gainsboro">
        <Grid.RowDefinitions>
            <RowDefinition Height="390*" />
                <RowDefinition Height="38" />
                <RowDefinition Height="75" />
        </Grid.RowDefinitions>
        <Grid.Resources>
            <converter:ByteArrayToBitMapConverter x:Key="imageConverter"/>


            </Grid.Resources>
            <telerik:RadCoverFlow  Name="imageGalleryCF"

                                 OffsetY="20"
                              VerticalAlignment="Center"
                                        CameraViewpoint="Center" ItemScale="0.7" RotationY="60"
                                   IsReflectionEnabled="False"
                                DistanceBetweenItems="35" DistanceFromSelectedItem="-30"
                              IsVirtualizing="True">

                <telerik:RadCoverFlow.ItemTemplate>
                <DataTemplate>
                        <telerik:RadButton Name="selectedImageRBT" Click="selectedImageRBT_Click">
                            <Image Source="{Binding  Converter={StaticResource imageConverter}}"
                                Stretch="UniformToFill"
                                   Width="316" Height="400"
                            />
                        </telerik:RadButton>
                    </DataTemplate>
            </telerik:RadCoverFlow.ItemTemplate>
        </telerik:RadCoverFlow>

        <!--<telerik:RadDomainDataSource Name="imageGalleryDomainDataSource" LoadedData="imageGalleryDomainDataSource_LoadedData" LoadingData="imageGalleryDomainDataSource_LoadingData" AutoLoad="False" QueryName="GetImageGalleriesQuery" Height="0" Width="0" Visibility="Collapsed" Margin="416,234,416,156">
            <telerik:RadDomainDataSource.DomainContext>
                <my:ImageGalleryContext/>
            </telerik:RadDomainDataSource.DomainContext>
        </telerik:RadDomainDataSource>-->
            <Grid Grid.Row="1" Name="searchGrid">
                <TextBox Height="23" HorizontalAlignment="Left" Margin="186,9,0,0" Name="searchTB" VerticalAlignment="Top" Width="304" />
                <telerik:RadButton Click="firstRBT_Click" ToolTipService.ToolTip="First 10" Content="First" Height="23" HorizontalAlignment="Left" Margin="498,9,0,0" Name="firstRBT" VerticalAlignment="Top" Width="31" />
                <telerik:RadButton Click="previousRBT_Click" ToolTipService.ToolTip="Previous 10" Content="Pre" Height="23" HorizontalAlignment="Left" Margin="537,9,0,0" Name="previousRBT" VerticalAlignment="Top" Width="31" />
                <telerik:RadButton Click="nextRBT_Click" ToolTipService.ToolTip="Next 10" Content="Next" Height="23" HorizontalAlignment="Left" Margin="576,9,0,0" Name="nextRBT" VerticalAlignment="Top" Width="31" />
                <telerik:RadButton Click="lastRBT_Click" ToolTipService.ToolTip="Last 10" Content="Last" Height="23" HorizontalAlignment="Left" Margin="615,9,0,0" Name="lastRBT" VerticalAlignment="Top" Width="31" />
            </Grid>
                <Grid Grid.Row="2" Name="associateGrid">
                <TextBlock Height="23" HorizontalAlignment="Left" Margin="10,10,0,0" Name="textBlock1" Text="Document Type" VerticalAlignment="Top" />
                <TextBlock Height="23" HorizontalAlignment="Left" Margin="209,10,0,0" Name="entityLB" Text="Vendor" VerticalAlignment="Top" />
                <TextBlock Height="23" HorizontalAlignment="Left" Margin="360,10,0,0" Name="textBlock3" Text="Invoice Number" VerticalAlignment="Top" />
                <telerik:RadComboBox SelectedValue="{Binding DocumentTypeData,Mode=TwoWay}" SelectionChanged="documentTypeRCB_SelectionChanged" Height="23" HorizontalAlignment="Left" Margin="10,41,0,0" Name="documentTypeRCB" VerticalAlignment="Top" Width="120" />
                <sdk:AutoCompleteBox Height="23" HorizontalAlignment="Left" Margin="176,41,0,0" Name="entityACB" VerticalAlignment="Top" Width="120"
                    MinimumPopulateDelay="100"  MinimumPrefixLength="1"

                                                     Text="{Binding VendorData,Mode=TwoWay,ValidatesOnNotifyDataErrors=True,ValidatesOnExceptions=True,NotifyOnValidationError=True}"
                                                     IsTextCompletionEnabled="True"
                                                     Populating="entityACB_Populating"
                                                     KeyDown="entityACB_KeyDown"
                                     LostFocus="entityACB_LostFocus"
                                                    SelectionChanged="entityACB_SelectionChanged"
                                                     ToolTipService.ToolTip="F2 searching"   >

                    </sdk:AutoCompleteBox>
                 <sdk:AutoCompleteBox Height="23" HorizontalAlignment="Left" Margin="360,41,0,0" Name="invoiceNumberACB" VerticalAlignment="Top" Width="120"
                                         MinimumPopulateDelay="100"  MinimumPrefixLength="1"
                                                     Text="{Binding InvoiceNumberData,Mode=TwoWay,ValidatesOnNotifyDataErrors=True,ValidatesOnExceptions=True,NotifyOnValidationError=True}"
                                                    IsTextCompletionEnabled="True"
                                      LostFocus="invoiceNumberACB_LostFocus"
                                                     Populating="invoiceNumberACB_Populating"
                                                     KeyDown="invoiceNumberACB_KeyDown"
                                                     ToolTipService.ToolTip="F2 searching"   >

                </sdk:AutoCompleteBox>
                <TextBlock Height="23" HorizontalAlignment="Left" Margin="519,10,0,0" Name="subjectLB" Text="Subject" VerticalAlignment="Top" />
                <TextBox Height="23" HorizontalAlignment="Left"  Margin="519,41,0,0"  Name="subjectTB" Text="{Binding SubjectData, Mode=TwoWay, ValidatesOnNotifyDataErrors=True, ValidatesOnExceptions=True, NotifyOnValidationError=True}"  VerticalAlignment="Top" Width="120" />
                <telerik:RadButton Click="associateRBT_Click" Content="Associate" Height="23" HorizontalAlignment="Left" Margin="703,41,0,0" Name="associateRBT" VerticalAlignment="Top" Width="75" />

            </Grid>
        </Grid>
    </telerik:RadBusyIndicator>
</telerik:RadWindow>

[Dani]

Hello Edward,

Indeed, you have set some offset that positions the RadCoverFlowItems, but you have not positioned the RadCoverFlow control itself. By default RadCoverFlow will occupy all available space. So in your case, it occupies the GridRow with the "390*" dimension. Then , it is vertically and horizontally centered.

What you need to do is set en explicit Height of the RadCoverFlow control and then align it vertically. Please, note that it is essential that you set Height when vertically aligning the control, otherwise it will simply stretch regardless of the vertical alignment you have set.

I have prepared a very basic sample, using your layout,  that demonstrates a nice and reasonable layout behavior of the control.

I hope this helps.

Best wishes,
Dani
the Telerik team