Silverlight Busy Indicator Customr Template

Question

I am trying to use the Silverlight busy indicator control from the tool kit, and applying my own custom template for the UI. The code for the xaml looks like this

<UserControl x:Class="CustomBusyIndicator.MainPage"
    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:controlsToolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit"
             xmlns:ed="clr-namespace:Microsoft.Expression.Shapes;assembly=Microsoft.Expression.Drawing"
             mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <controlsToolkit:BusyIndicator   IsBusy="True"
    BusyContent="{Binding}" Margin="0,0,0,0" >

        <!-- Provide custom UI for busy display -->
        <controlsToolkit:BusyIndicator.BusyContentTemplate>
            <DataTemplate >
                <StackPanel Width="307" Height="32">
                <Grid x:Name="LayoutRoot" Background="#8EBD40" >
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="73"></ColumnDefinition>
                        <ColumnDefinition Width="Auto"></ColumnDefinition>
                    </Grid.ColumnDefinitions>

                    <Canvas  Width="30" Height="30" Grid.Column="0">
                        <ed:Arc ArcThickness=".7" ArcThicknessUnit="Pixel" EndAngle="360"   Stretch="None" Stroke="White" StartAngle="90" Fill="White" UseLayoutRounding="False" Width="30" Height="30"/>
                        <Canvas.RenderTransform>
                            <RotateTransform x:Name="SpinnerRotate" Angle="0" CenterX="15" CenterY="15"     />
                        </Canvas.RenderTransform>
                        <Canvas.Triggers>
                            <EventTrigger RoutedEvent="ContentControl.Loaded">
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="SpinnerRotate" 
                                 Storyboard.TargetProperty="(RotateTransform.Angle)" 
                                 From="0" To="360" Duration="0:0:01" 
                                 RepeatBehavior="Forever" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                        </Canvas.Triggers>
                    </Canvas>
                    <TextBlock Grid.Column="1" FontWeight="Thin" FontSize="25" Foreground="White" FontFamily="Verdana" VerticalAlignment="Center" HorizontalAlignment="Center">Uploading....</TextBlock>
                </Grid>
                </StackPanel>
            </DataTemplate>
        </controlsToolkit:BusyIndicator.BusyContentTemplate>

        <!-- Remove unnecessary default ProgressBar -->
        <controlsToolkit:BusyIndicator.ProgressBarStyle>
            <Style TargetType="ProgressBar">
                <Setter Property="Visibility" Value="Collapsed"/>
            </Style>
        </controlsToolkit:BusyIndicator.ProgressBarStyle>

        <!-- Content goes here... -->

    </controlsToolkit:BusyIndicator>
</UserControl>

Everything seems to be fine, except, there is grey border which comes up around the content template. Is there any way that can be overridden?

score 0 · Answer 1 · answered Sep 05 '13 at 22:29

If you check the original template for the BusyIndicator, you will find the border you need to change:

<Style TargetType="controlsToolkit:BusyIndicator">
        <Setter Property="BusyContent" Value="Please wait..."/>
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="OverlayStyle">
            <Setter.Value>
                <Style TargetType="Rectangle">
                    <Setter Property="Fill" Value="White"/>
                    <Setter Property="Opacity" Value="0.5"/>
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="ProgressBarStyle">
            <Setter.Value>
                <Style TargetType="ProgressBar">
                    <Setter Property="IsIndeterminate" Value="True"/>
                    <Setter Property="Height" Value="15"/>
                    <Setter Property="Margin" Value="8,0,8,8"/>
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="DisplayAfter" Value="00:00:00.1"/>
        <Setter Property="HorizontalAlignment" Value="Stretch"/>
        <Setter Property="VerticalAlignment" Value="Stretch"/>
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="controlsToolkit:BusyIndicator">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            [states go here]
                        </VisualStateManager.VisualStateGroups>
                        <ContentControl
                            x:Name="content"
                            Content="{TemplateBinding Content}"
                            ContentTemplate="{TemplateBinding ContentTemplate}"
                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        <Rectangle
                            x:Name="overlay"
                            Style="{TemplateBinding OverlayStyle}"/>
                        <ContentPresenter
                            x:Name="busycontent">
                            <Grid HorizontalAlignment="Center"
                                  VerticalAlignment="Center">
                                <Border Background="White"
                                        BorderThickness="1"
                                        CornerRadius="2">
                                    <Border.BorderBrush>
                                        <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                            <GradientStop Color="#FFA3AEB9" Offset="0"/>
                                            <GradientStop Color="#FF8399A9" Offset="0.375"/>
                                            <GradientStop Color="#FF718597" Offset="0.375"/>
                                            <GradientStop Color="#FF617584" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Border.BorderBrush>
                                    <Border CornerRadius="1.5"
                                            Margin="1">
                                        <Border.Background>
                                            <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                                <GradientStop Color="#FFF6F8F9" Offset="0.02"/>
                                                <GradientStop Color="#FFB8B8B8" Offset="0.996"/>
                                            </LinearGradientBrush>
                                        </Border.Background>
                                        <Grid MinWidth="150">
                                            <Grid.RowDefinitions>
                                                <RowDefinition/>
                                                <RowDefinition Height="Auto"/>
                                            </Grid.RowDefinitions>
                                            <ContentPresenter Content="{TemplateBinding BusyContent}"
                                                              ContentTemplate="{TemplateBinding BusyContentTemplate}"
                                                              Margin="8"/>
                                            <ProgressBar  Grid.Row="1"
                                                          Style="{TemplateBinding ProgressBarStyle}"/>
                                        </Grid>
                                    </Border>
                                </Border>
                            </Grid>
                        </ContentPresenter>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

So in short:

<Border Background="White"
        BorderThickness="1"
        CornerRadius="2">

Just imitate that structure making sure the border is included.

Silverlight Busy Indicator Customr Template

1 Answers1