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

如果您检查BusyIndicator的原始模板，您将找到需要更改的边框：

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

只需模仿该结构，确保包含边框。

Silverlight Busyindicator客户模板

1 个答案: