Silverlight忙碌指示器定製者模板

Question

我正嘗試使用工具包中的Silverlight繁忙指示器控件，並將自己的自定義模板應用於UI。爲XAML代碼看起來像這樣

<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> 

一切似乎都很正常，只是，有它周圍的內容模板出現灰色邊框。有什麼方法可以被覆蓋嗎？

Answer 1

如果你檢查的BusyIndi​​cator控件的原始模板，你會發現你需要改變邊界：

<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> 

因此，在短期：

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

只是模仿該結構確保邊境已經包括了。