Home / Community & Support / Developer Productivity Tools Forums / Silverlight > Upload > Changing the look of RadUpload

• Ryan

  Posted on Aug 6, 2008 (permalink)

  Hi,
  
  Firstly, love the control - thank you for making my life so much easier.  After struggling with WebClients, Handlers and Sockets for a week this solution is an elegant way to upload without the headaches!
  
  I would like to be able to change the look and feel of the control.  Is it possible to change the text where it says "Select files to upload:" and to stop the browse button from appearing once uploading commences.
  
  I also want to save the file under a different name on the server to stop different files with the same name being overwritten.
  
  I only want one file uploaded at any one time as I'm saving other information pertaining to the file in a database.
  
  Thanks.

  Reply

• Valentin.Stoychev Valentin.Stoychev

  Posted on Aug 6, 2008 (permalink)

  Hello Ryan,
  
  you need to modify the control template of the upload control to apply the layout changes that you need. To do this - define the new template and use the Template property to set it.
  
  OverwriteExistingFiles property can be used to prevent files from being overriden, or if you need more control over the server side processing of files - renaming/saving to database you should inherit our RadUploadHandler or to just create a new ASHX file.
  
  Let me know if need more help on this - your feedback will help us on shaping the control better.
  
  Thanks! 
  
  Kind regards,
  Valentin.Stoychev
  the Telerik team

  
  Check out Telerik Trainer, the state of the art learning tool for Telerik products.

  Reply

• Ryan

  Posted on Aug 7, 2008 (permalink)

  Hi,
  
  Thanks for the advice.  I'll look into changing the template.
  
  Stopping people overwriting files won't really be enough as I'm handling video uploads so will be best to inherit the RadUploadHandler.
  
  I'm struggling to find examples online of overloading your handler though?  Am I looking in the wrong places or do you have the source code available?
  
  Thanks again.
  
  Ryan

  Reply

• Valentin.Stoychev Valentin.Stoychev

  Posted on Aug 7, 2008 (permalink)

  Hi Ryan,
  
  There are no examples provided yet - we will try to do so for the next release.
   
  For the moment I'm attaching you the source of the Upload handler and the builded dll file. What you can do is to create a new handler from the source code provided and to handle the upload requests in the way you want. 
  
  You can see an example about how to declare a new handler in the downloaded zip file with our controls. There is a definition of the RadUploadHandler.ashx in the "SilverlightExamples" project.
  
  If you need any help understanding the specifics - please let us know - we will be glad to help.
  
  Kind regards,
  Valentin.Stoychev
  the Telerik team

  
  Check out Telerik Trainer, the state of the art learning tool for Telerik products.

  Attached files

  • UploadHandler.zip

  Reply

• Ryan

  Posted on Aug 14, 2008 (permalink)

  Hi Valentin,
  
  First I'd like to say thanks for attaching the upload handler - it helped me achieve what I needed to get done.
  
  However, after changing the control template to use my own control buttons and progress bar I'm now getting a "Object reference not set to an instance of an object" error when calling the StartUpload() method.  It was working fine before I used a control template.
  
  Is there something I am doing wrong?
  
  Best regards,
  
  Ryan
  

  Reply

• Valentin.Stoychev Valentin.Stoychev

  Posted on Aug 14, 2008 (permalink)

  Hello Ryan,
  
  Most probably the new template that you have created is not using the same naming convention for the elements as the original one. Can you please check that the names of the XAML elements are equal. If this doesn't solve the problem please send us the template that you have create and we will check-out what is wrong with it.
  
  
  Greetings,
  Valentin.Stoychev
  the Telerik team

  
  Check out Telerik Trainer, the state of the art learning tool for Telerik products.

  Reply

• Ryan

  Posted on Aug 15, 2008 (permalink)

  Hi Valentin,
  
  The control template I'm using is really simple although I can't find a single example of the the correct naming conventions for the components in the RadUpload control.  Expression Blend doesn't break the control down into its component parts either for some reason.
  
  Is there any documentation available that shows the default control template for the RadUpload control?
  
  My template is as follows:
  
  

  <my:RadUpload.Template>

  <ControlTemplate>

  <StackPanel Orientation="Vertical" Loaded="radUploadTemplate_Loaded">

  <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">

  <TextBlock x:Name="selectedFileTb" Text="Select File: " Foreground="{StaticResource textColour}" VerticalAlignment="Center"/>

  <TextBox Height="30" Width="200" Style="{StaticResource TextBoxStyle}" x:Name="selectedFileTxt" MaxLength="50" IsReadOnly="True"></TextBox>

  <Button x:Name="browseBtn" Content="..." Height="30" Margin="5" Click="BrowseBtn_Click" Style="{StaticResource ButtonStyle}" VerticalAlignment="Bottom" Visibility="Visible"/>

  </StackPanel>

  <TextBlock x:Name="uploadStatusText" Foreground="{StaticResource textColour}" HorizontalAlignment="Center" Visibility="Collapsed"/>

  <my1:RadProgressBar x:Name="uploadProgressBar" Width="200" Height="30" Minimum="0" Maximum="100" Visibility="Collapsed" HorizontalAlignment="Center"/>

  </StackPanel>

  </ControlTemplate>

  </my:RadUpload.Template>

  Thanks,
  
  Ryan
  

  Reply

• Answer Valentin.Stoychev Valentin.Stoychev

  Posted on Aug 19, 2008 (permalink)

  Hi Ryan,
  
  Sorry for the late reply.
  
  Here is the template for the RadUpload below:
  
  you need to name the elements appropriately and it will be ok - you will not need the event handles too.
  
  

  
  
  

  <Style x:Key="DefaultButtonStyle" TargetType="Button">

  <Setter Property="IsEnabled" Value="true" />

  <Setter Property="IsTabStop" Value="true" />

  <Setter Property="MinWidth" Value="5" />

  <Setter Property="MinHeight" Value="5" />

  <Setter Property="Margin" Value="0" />

  <Setter Property="HorizontalContentAlignment" Value="Center" />

  <Setter Property="VerticalContentAlignment" Value="Center" />

  <Setter Property="Cursor" Value="Arrow" />

  <Setter Property="TextAlignment" Value="Left" />

  <Setter Property="TextWrapping" Value="NoWrap" />

  <Setter Property="FontSize" Value="11" />

  <Setter Property="Padding" Value="20 0 20 0" />

  <Setter Property="Template">

  <Setter.Value>

  <ControlTemplate TargetType="Button">

  <Grid>

  <vsm:VisualStateManager.VisualStateGroups>

  <vsm:VisualStateGroup x:Name="CommonStates">

  <vsm:VisualState x:Name="Normal" />

  <vsm:VisualState x:Name="MouseOver">

  <Storyboard>

  <ColorAnimation Storyboard.TargetName="inner" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" To="#FF00BBFF" Duration="0:0:0.1" />

  <ColorAnimation Storyboard.TargetName="innerMost" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)" To="#FFBAE6F6" Duration="0:0:0.1" />

  <ColorAnimation Storyboard.TargetName="innerMost" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" To="#FFBAE6F6" Duration="0:0:0.1" />

  <ColorAnimation Storyboard.TargetName="innerMost" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[2].(GradientStop.Color)" To="#FFD5EDF6" Duration="0:0:0.1" />

  <ColorAnimation Storyboard.TargetName="innerMost" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[3].(GradientStop.Color)" To="#FFD5EDF6" Duration="0:0:0.1" />

  </Storyboard>

  </vsm:VisualState>

  <vsm:VisualState x:Name="Pressed">

  <Storyboard>

  <ColorAnimation Storyboard.TargetName="inner" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" To="#FF467080" Duration="0:0:0.1" />

  <ColorAnimation Storyboard.TargetName="innerMost" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)" To="#FF8DABB7" Duration="0:0:0.1" />

  <ColorAnimation Storyboard.TargetName="innerMost" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" To="#FF8DABB7" Duration="0:0:0.1" />

  <ColorAnimation Storyboard.TargetName="innerMost" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[2].(GradientStop.Color)" To="#FFA1BAC4" Duration="0:0:0.1" />

  <ColorAnimation Storyboard.TargetName="innerMost" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[3].(GradientStop.Color)" To="#FFA1BAC4" Duration="0:0:0.2" />

  </Storyboard>

  </vsm:VisualState>

  <vsm:VisualState x:Name="Disabled">

  <Storyboard>

  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisual" Storyboard.TargetProperty="Visibility" Duration="0">

  <DiscreteObjectKeyFrame KeyTime="0">

  <DiscreteObjectKeyFrame.Value>

  <Visibility>Visible</Visibility>

  </DiscreteObjectKeyFrame.Value>

  </DiscreteObjectKeyFrame>

  </ObjectAnimationUsingKeyFrames>

  </Storyboard>

  </vsm:VisualState>

  </vsm:VisualStateGroup>

  <vsm:VisualStateGroup x:Name="FocusStates">

  <vsm:VisualState x:Name="Focused">

  <Storyboard>

  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="Visibility" Duration="0">

  <DiscreteObjectKeyFrame KeyTime="0">

  <DiscreteObjectKeyFrame.Value>

  <Visibility>Visible</Visibility>

  </DiscreteObjectKeyFrame.Value>

  </DiscreteObjectKeyFrame>

  </ObjectAnimationUsingKeyFrames>

  </Storyboard>

  </vsm:VisualState>

  <vsm:VisualState x:Name="Unfocused" />

  </vsm:VisualStateGroup>

  </vsm:VisualStateManager.VisualStateGroups>

  <Border x:Name="outer" Background="#FFFFFFFF" CornerRadius="3,3,3,3" BorderThickness="1" BorderBrush="#FFFFFFFF">

  <Border x:Name="inner" CornerRadius="2,2,2,2" BorderThickness="1" BorderBrush="#FF95BCCA">

  <Border x:Name="innerMost" BorderBrush="#00FFFFFF" CornerRadius="1,1,1,1">

  <Border.Background>

  <LinearGradientBrush EndPoint="1.007,0.841" StartPoint="0.029,0.841">

  <GradientStop Color="#FFE2E8EB" Offset="0" />

  <GradientStop Color="#FFE2E8EB" Offset="1" />

  <GradientStop Color="#FFFFFFFF" Offset="0.13" />

  <GradientStop Color="#FFFFFFFF" Offset="0.87" />

  </LinearGradientBrush>

  </Border.Background>

  <ContentPresenter Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="4,5,4,4" TextWrapping="Wrap" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" />

  </Border>

  </Border>

  </Border>

  <Rectangle Stroke="#0092CD" StrokeThickness="1" Margin="0" RadiusX="3" RadiusY="3" Fill="Transparent" x:Name="FocusVisual" Visibility="Collapsed" />

  <Rectangle x:Name="DisabledVisual" Visibility="Collapsed" RadiusX="3" RadiusY="3" Fill="#80FFFFFF" IsHitTestVisible="false" />

  </Grid>

  </ControlTemplate>

  </Setter.Value>

  </Setter>

  </Style>

  <Style TargetType="telerik:RadUpload">

  <Setter Property="FontFamily" Value="Tahoma"></Setter>

  <Setter Property="FontSize" Value="11"></Setter>

  <Setter Property="Foreground" Value="#FFFFFFFF"></Setter>

  <Setter Property="Filter" Value="All files (*.*)|*.*"></Setter>

  <Setter Property="FilterIndex" Value="1"></Setter>

  <Setter Property="IsMultiselect" Value="true"></Setter>

  <Setter Property="BufferSize" Value="100000"></Setter>

  <Setter Property="MaxFileSize" Value="-1"></Setter>

  <Setter Property="MaxUploadSize" Value="-1"></Setter>

  <Setter Property="MaxFileCount" Value="-1"></Setter>

  <Setter Property="MinHeight" Value="80"></Setter>

  <Setter Property="MinWidth" Value="250"></Setter>

  <Setter Property="MaxHeight" Value="300"></Setter>

  <Setter Property="Width" Value="400"></Setter>

  <Setter Property="IsEnabled" Value="True"></Setter>

  <Setter Property="IsPauseEnabled" Value="True"></Setter>

  <Setter Property="Background">

  <Setter.Value>

  <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

  <GradientStop Color="#FFE9E9E9" Offset="0"/>

  <GradientStop Color="#FFCCCCCC" Offset="1"/>

  </LinearGradientBrush>

  </Setter.Value>

  </Setter>

  <Setter Property="BorderBrush" Value="#FFCCCCCC"/>

  <Setter Property="Template">

  <Setter.Value>

  <ControlTemplate TargetType="telerik:RadUpload">

  <Grid x:Name="RootElement">

  <Grid.RowDefinitions>

  <!-- Caption -->

  <RowDefinition Height="auto"></RowDefinition>

  <!-- delimiter -->

  <RowDefinition Height="auto"></RowDefinition>

  <!-- Selected Files area -->

  <RowDefinition Height="*"></RowDefinition>

  <!-- Total Progress -->

  <RowDefinition Height="auto"></RowDefinition>

  <!-- Command buttons -->

  <RowDefinition Height="auto"></RowDefinition>

  </Grid.RowDefinitions>

  <!-- Upload background decorations -->

  <Rectangle RadiusY="5" Grid.RowSpan="5" RadiusX="5" Stroke="{TemplateBinding BorderBrush}"/>

  <Rectangle Stroke="#FFFFFFFF" Fill="{TemplateBinding Background}" Grid.RowSpan="5"  RadiusX="5" RadiusY="5" Margin="1,1,1,1"/>

  <!-- Header text -->

  <TextBlock Margin="12,6" x:Name="ProgressCaptionText" Grid.Row="0" Text="Select Files To Upload:" FontWeight="Bold" Foreground="Black" />

  <!-- Header Separator -->

  <Rectangle Grid.Row="1" Fill="#FFFFFFFF" Margin="1,0" Height="1"/>

  <!-- Selected files container -->

  <ScrollViewer Grid.Row="2" Margin="12,8" BorderThickness="0" x:Name="SelectedFilesContainer" Visibility="Collapsed" VerticalScrollBarVisibility="Auto"></ScrollViewer>

  <!-- Total Progress area -->

  <Grid x:Name="TotalProgressArea" Visibility="Collapsed" Grid.Row="3" Margin="0 10 0 10" >

  <core:RadProgressBar MinHeight="20" x:Name="TotalProgressBar" Height="27"  Minimum="0" Maximum="100"/>

  <Grid VerticalAlignment="Center">

  <TextBlock Margin="12, 5" Text="Total" FontWeight="Bold"/>

  <TextBlock x:Name="TotalPercentText" FontWeight="Bold" Margin="5" HorizontalAlignment="Center" Text="0%"/>

  <TextBlock x:Name="TotalSizeText" FontWeight="Bold" Margin="5" HorizontalAlignment="Right" Text="0"/>

  </Grid>

  </Grid>

  <!-- Command buttons -->

  <StackPanel Margin="7,8" Grid.Row="4" Orientation="Horizontal" VerticalAlignment="Center">

  <Button Style="{StaticResource DefaultButtonStyle}" Margin="5" x:Name="BrowseButton" Content="Browse" />

  <Button Style="{StaticResource DefaultButtonStyle}" Margin="5" x:Name="PauseButton" Content="Pause" Visibility="Collapsed"/>

  <Button Style="{StaticResource DefaultButtonStyle}" Margin="5" x:Name="UploadButton" Content="Upload"  Visibility="Collapsed"/>

  <Button Style="{StaticResource DefaultButtonStyle}" Margin="5" x:Name="CancelButton" Content="Cancel" Visibility="Collapsed"/>

  </StackPanel>

  </Grid>

  </ControlTemplate>

  </Setter.Value>

  </Setter>

  </Style>

  
  Please let us know if we can help you further.
  
  Greetings,
  Valentin.Stoychev
  the Telerik team

  
  Check out Telerik Trainer, the state of the art learning tool for Telerik products.

  Reply

• Ryan

  Posted on Aug 20, 2008 (permalink)

  Thanks again Valentin, that was what I needed!
  
  Best regards,
  
  Ryan
  

  Reply

• Paul

  Posted on Apr 16, 2012 (permalink)

  I think I have a similar question.  I want to add a description to the file being uploaded how do I visually add a label and a text box for when a user adds a file to upload and they can then set a description?  Is this a data template in the Rad Upload item?

  Reply

• Paul

  Posted on Apr 17, 2012 (permalink)

  So this is what I'm trying to accomplish but it seems that when I add a file it goes back to the old style.  I created a custom RadUploadItemControl template to accomplish this but it doesn't seem to stick.  What am I missing here?  any sample project would be supper helpful.

   

   

  Attached files

  • 4-17-2012-3-53-48-PM.png

  Reply

• Paul

  Posted on Apr 18, 2012 (permalink)

  Okay so I got this to work - somewhat - based on an example but I thought I could inherit the RadUploadItem in a new class and add a Description property but now when I add a new file (browse, select file) I get an XML parse error at line 0 pos 0.
  My Class looks like such:
  

   

   

  using System;

  using System.Net;

  using System.Windows;

  using System.Windows.Controls;

  using System.Windows.Documents;

  using System.Windows.Ink;

  using System.Windows.Input;

  using System.Windows.Media;

  using System.Windows.Media.Animation;

  using System.Windows.Shapes;

  using Telerik.Windows.Controls;

   

  namespace SilverlightApplication1

  {

      public class ExtRadUploadItem:RadUploadItem

      {

          public ExtRadUploadItem()

          {

          }

          public string Description

          {

              get;set;

          }

      }

  }

  
  Still struggling but "belive" I'm close here.
  
  Help anyone!

  Reply

• Alex Fidanov Alex Fidanov

  Posted on Apr 19, 2012 (permalink)

  Hi,

   Actually, I would recommend creating an attached property and setting it for the RadUploadItem instread of subclassing the RadUploadItem and extending it additional properties. Do you think that using an attached property would be acceptable in your scenario?

  Greetings,
  Alex Fidanov
  the Telerik team

  Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  Reply

• Paul

  Posted on Apr 19, 2012 (permalink)

  Can you provide a code snippet of how to achieve this?

  Reply

• Tina Stancheva Tina Stancheva

  Posted on Apr 24, 2012 (permalink)

  Hello Paul,
  
  Looking further at your case, I believe you can implement the described functionality without deriving from the RadUploadItem or introducing an attached property.
  
  Instead you can edit the RadUploadItem default ControlTemplate to add a TextBlock and a TextBox elements. You can use the TextBox element to add the file description, then handle the UploadStarted event and get the description the user entered for each file. You can even pass this information to the server-side of the handler.
  
  I attached a sample project demonstrating this approach so please have a look at it and let me know if it works for you.
  
  Greetings,
  Tina Stancheva
  the Telerik team

  Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  Attached files

  • UploadSample.zip

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / Silverlight > Upload > Changing the look of RadUpload