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

2 posts, 1 answers
  1. Edward Pauley
    Edward Pauley avatar
    48 posts
    Member since:
    May 2010

    Posted 31 May 2011 Link to this post

    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:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        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>
  2. Answer
    Dani
    Admin
    Dani avatar
    848 posts

    Posted 01 Jun 2011 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. DevCraft banner
Back to Top