How Can I Get A Dynamically Sized RadUpload Control

2 posts, 0 answers
  1. Randy
    Randy avatar
    40 posts
    Member since:
    Nov 2007

    Posted 05 May 2011 Link to this post

    Telerik Silverlight Controls Version:  2011.1.0419.1040
    Our Telerik Theme:  Office Blue

    A version or two ago, all we needed to do was get the Office Blue template for the upload control and override the MaxHeight property (from 300 to 2000).

    I tried that this time but I'm having no luck.
    I then tried messing with a bunch of Height, MaxHeight, Width, etc / "Infinity" property settings as well that I saw posted somewhere, but still no luck.

    What I do want is to be able to drop the RadUpload control onto my page and have it take up all the available horizontal and verticle space of its parent container.
    Also, as the browser window itself is resized, I want the upload control to also dynamically resize with it.

    Here is an example page from our site (most of our pages look something like this) -
    Basically a splitter with a left pane and right pane, and they already dynamically resize with the browser window.
    In this case, there is also a tab control in the left pane and the upload control is in one of the tabs.

    I appreciate your help
    If we need to modify the template (Office Blue), that's fine.
    If we can do it without modifying the template, even better.

    <navigation:Page x:Class="PNC.CM.PCA.Silverlight.UI.Shell.Views.Upload" 
                     xmlns="http://schemas.microsoft.com/winfx/2006/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"
                     xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
                     xmlns:telerikInput="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input" 
                     xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
                     xmlns:commonControls="clr-namespace:PNC.CM.PCA.Silverlight.Common.Controls;assembly=PNC.CM.PCA.Silverlight.Common"
                     xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
                     xmlns:my="clr-namespace:System;assembly=mscorlib"
                     mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="600">
        <navigation:Page.Resources>
            <!--Please Use Your "Office Blue" Theme -->
        </navigation:Page.Resources>
      
        <Grid x:Name="LayoutRoot" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
      
            <telerik:RadDocking x:Name="RadDock"  Padding="6" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" AllowUnsafeMode="True">
                <telerik:RadDocking.DocumentHost>
                    <telerik:RadSplitContainer x:Name="RadSplitContainerRight"  Background="{x:Null}">
                        <telerik:RadPaneGroup x:Name="RadPaneGroupRight"  VerticalContentAlignment="Stretch">
                            <telerik:RadDocumentPane x:Name="RadDocPaneRight" CanDockInDocumentHost="False" CanUserClose="False" CanFloat="False" CanUserPin="False"  ScrollViewer.VerticalScrollBarVisibility="Visible" ContextMenuTemplate="{x:Null}" VerticalAlignment="Stretch" >
                                <telerik:RadPane.HeaderTemplate>
                                    <DataTemplate>
                                        <StackPanel Orientation="Horizontal" Width="150" ToolTipService.ToolTip="Available Tasks" Height="22">
                                            <Image Source="/Images/16/Grid.png" Width="16"></Image>
                                            <TextBlock Text="Right Pane" Margin="10,0,0,0" VerticalAlignment="Center" />
                                        </StackPanel>
                                    </DataTemplate>
                                </telerik:RadPane.HeaderTemplate>
                                <telerik:RadDocumentPane.Content>
      
                                    <TextBlock Text="Right Pane Content" VerticalAlignment="Center" Margin="5,0,0,0"></TextBlock>
      
                                </telerik:RadDocumentPane.Content>
                            </telerik:RadDocumentPane>
                        </telerik:RadPaneGroup>
      
                    </telerik:RadSplitContainer>
                </telerik:RadDocking.DocumentHost>
                <telerik:RadSplitContainer x:Name="RadSplitContainerLeft" Orientation="Vertical" InitialPosition="DockedLeft" telerik:DockingPanel.InitialSize="350,350" MinWidth="150" MaxWidth="350" >
                    <telerik:RadPaneGroup x:Name="RadPaneGroupLeft" telerik:ProportionalStackPanel.RelativeSize="350, 350"  AllTabsEqualHeight="True" FlowDirection="LeftToRight">
                        <telerik:RadPane x:Name="RadPaneLeft" Header="Left Pane Content" CanDockInDocumentHost="False" AutoHideWidth="350" CanFloat="False" CanUserClose="False" CanUserPin="True" FlowDirection="LeftToRight" ContextMenuTemplate="{x:Null}" IsTabStop="True" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ScrollViewer.VerticalScrollBarVisibility="Auto"  ScrollViewer.HorizontalScrollBarVisibility="Hidden">
      
                            <telerik:RadPane.TitleTemplate>
                                <DataTemplate>
                                    <StackPanel Orientation="Horizontal" IsHitTestVisible="False" Height="25">
                                        <Image Height="16" Width="16"  Source="/Images/16/Task.png"></Image>
                                        <TextBlock Text="Left Pane Content" VerticalAlignment="Center" Margin="5,0,0,0"></TextBlock>
                                    </StackPanel>
                                </DataTemplate>
                            </telerik:RadPane.TitleTemplate>
      
                            <telerik:RadPane.Content>
      
                                <Grid Margin="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="90" MinWidth="90" MaxWidth="90"></ColumnDefinition>
                                        <ColumnDefinition Width="*"></ColumnDefinition>
                                    </Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="33" MinHeight="33" MaxHeight="33"></RowDefinition>
                                        <RowDefinition Height="*"></RowDefinition>
                                    </Grid.RowDefinitions>
      
                                    <TextBlock Grid.Column="0" Grid.Row="0" Text="Some controls are here" HorizontalAlignment="Left" Margin="12,0,0,0" VerticalAlignment="Center" />
      
                                    <telerik:RadTabControl Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" Margin="0" SelectedIndex="{Binding Path=SelectedTabIndex, Mode=TwoWay, FallbackValue=0}">
                                        <telerik:RadTabItem>
                                            <telerik:RadTabItem.Header>
                                                <StackPanel Orientation="Horizontal">
                                                    <TextBlock Text="Tab 1" Margin="2,0,0,0" />
                                                </StackPanel>
                                            </telerik:RadTabItem.Header>
                                            <telerik:RadTabItem.Content>
      
                                                <Grid Margin="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                                                    <Grid.ColumnDefinitions>
                                                        <ColumnDefinition Width="110" MinWidth="110" MaxWidth="110"></ColumnDefinition>
                                                        <ColumnDefinition Width="*"></ColumnDefinition>
                                                    </Grid.ColumnDefinitions>
                                                    <Grid.RowDefinitions>
                                                        <RowDefinition Height="33" MinHeight="33" MaxHeight="33"></RowDefinition>
                                                        <RowDefinition Height="33" MinHeight="33" MaxHeight="33"></RowDefinition>
                                                        <RowDefinition Height="*"></RowDefinition>
                                                    </Grid.RowDefinitions>
      
                                                    <TextBlock Grid.Column="0" Grid.Row="0" Text="A text box:" HorizontalAlignment="Left" Margin="12,3,0,0" VerticalAlignment="Center" />
      
                                                    <telerik:RadMaskedTextBox Grid.Column="1" Grid.Row="0" EmptyContent="" Mask="9999999999" Placeholder="#" Value="" Margin="5" Width="133" SelectionOnFocus="SelectAll" />
                                                      
                                                </Grid>
                                            </telerik:RadTabItem.Content>
                                        </telerik:RadTabItem>
      
                                        <telerik:RadTabItem >
                                            <telerik:RadTabItem.Header>
                                                <StackPanel Orientation="Horizontal">
                                                    <TextBlock Text="Tab 2" Margin="2,0,0,0" />
                                                </StackPanel>
                                            </telerik:RadTabItem.Header>
                                            <telerik:RadTabItem.Content>
                                                <StackPanel>
                                                    <!--How can we get this upload control to strech horizontally and vertically to fill up this space (and auto resize as the browser itself is resized?-->
                                                    <telerik:RadUpload x:Name="RadUpload"
                                                                       VerticalAlignment="Top"
                                                                       IsAutomaticUpload="True"
                                                                       IsMultiselect="False"
                                                                       IsAppendFilesEnabled="False"
                                                                       SelectionVisibility="Collapsed"
                                                                       Filter="Supported Files (*.xls;*.xlsx)|*.xls;*.xlsx">
                                                    </telerik:RadUpload>
                                                      
                                                </StackPanel>
                                            </telerik:RadTabItem.Content>
      
                                        </telerik:RadTabItem>
      
                                    </telerik:RadTabControl>
      
                                </Grid>
                            </telerik:RadPane.Content>
      
                        </telerik:RadPane>
                    </telerik:RadPaneGroup>
                </telerik:RadSplitContainer>
            </telerik:RadDocking>
      
        </Grid>
    </navigation:Page>


    Thanks,
    Randy
  2. Alex Fidanov
    Admin
    Alex Fidanov avatar
    636 posts

    Posted 10 May 2011 Link to this post

    Hi Randy,

    The RadUpload has by default set (Min)Width/Height properties. If you want to be able to resize properly, you have to set the Width/Height to Auto and then set the MinWidth/MinHeight to zero. You do not need the Max(width/height):

    <RadUpload Width="Auto" MinWidth="0" />



    Kind regards,
    Alex Fidanov
    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