2010-07-13 8 views
1

Je suis à la recherche d'un exemple de style pour changer l'apparence de la Silverlight BusyIndicator pour ressembler davantage à l'aspect "roue tournante" des applications AJAX.Style de style Ajax pour Silverlight BusyIndicator?

Un tour autour de google produit des liens vers où les gens créent de nouveaux contrôles pour atteindre la même chose (je soupçonne qu'ils sont antérieurs à la BusyIndicator) mais je préfèrerais peaufiner le BusyIndicator si possible.

Quelqu'un peut-il me diriger dans la bonne direction?

Merci

Mark

Répondre

3

J'ai fait ma commande BusyIndicator de Silverlight Toolkit

Voici ce dont vous avez besoin:

  1. Définir l'espace de noms de système dans votre fichier de style:

    xmlns: System = "clr- namespace: System; assembly = mscorlib "

  2. Mettez le style/modèle dans votre fichier de style:

    <ControlTemplate x:Key="AjaxBusyIndicatorControlTemplate" TargetType="toolkit:BusyIndicator"> 
        <Grid x:Name="ColorLayer">    
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="VisibilityStates"> 
           <VisualState x:Name="Hidden"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.001" Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="busycontent"> 
              <DiscreteObjectKeyFrame KeyTime="00:00:00"> 
               <DiscreteObjectKeyFrame.Value> 
                <Visibility>Collapsed</Visibility> 
               </DiscreteObjectKeyFrame.Value> 
              </DiscreteObjectKeyFrame> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.001" Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="overlay"> 
              <DiscreteObjectKeyFrame KeyTime="00:00:00"> 
               <DiscreteObjectKeyFrame.Value> 
                <Visibility>Collapsed</Visibility> 
               </DiscreteObjectKeyFrame.Value> 
              </DiscreteObjectKeyFrame> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Visible"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.001" Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="busycontent"> 
              <DiscreteObjectKeyFrame KeyTime="00:00:00"> 
               <DiscreteObjectKeyFrame.Value> 
                <Visibility>Visible</Visibility> 
               </DiscreteObjectKeyFrame.Value> 
              </DiscreteObjectKeyFrame> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.001" Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="overlay"> 
              <DiscreteObjectKeyFrame KeyTime="00:00:00"> 
               <DiscreteObjectKeyFrame.Value> 
                <Visibility>Visible</Visibility> 
               </DiscreteObjectKeyFrame.Value> 
              </DiscreteObjectKeyFrame> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
          <VisualStateGroup x:Name="BusyStatusStates"> 
           <VisualState x:Name="Idle"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.001" Storyboard.TargetProperty="(Control.IsEnabled)" Storyboard.TargetName="content"> 
              <DiscreteObjectKeyFrame KeyTime="00:00:00"> 
               <DiscreteObjectKeyFrame.Value> 
                <System:Boolean>True</System:Boolean> 
               </DiscreteObjectKeyFrame.Value> 
              </DiscreteObjectKeyFrame> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Busy"> 
            <Storyboard RepeatBehavior="Forever" AutoReverse="False"> 
             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="loader"> 
              <EasingDoubleKeyFrame KeyTime="0" Value="0"/> 
              <EasingDoubleKeyFrame KeyTime="0:0:1" Value="359.999"/> 
             </DoubleAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.001" Storyboard.TargetProperty="(Control.IsEnabled)" Storyboard.TargetName="content"> 
              <DiscreteObjectKeyFrame KeyTime="00:00:00"> 
               <DiscreteObjectKeyFrame.Value> 
                <System:Boolean>False</System:Boolean> 
               </DiscreteObjectKeyFrame.Value> 
              </DiscreteObjectKeyFrame> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
         <ContentControl x:Name="content" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/> 
         <Rectangle x:Name="overlay" Style="{TemplateBinding OverlayStyle}"/> 
         <ContentPresenter x:Name="busycontent"> 
          <Path x:Name="loader" Height="19" Width="19" Canvas.Left="0.5" Canvas.Top="0.5" Stretch="Fill" UseLayoutRounding="False" Stroke="Black" StrokeThickness="0.2" RenderTransformOrigin="0.5,0.5" 
           Data="M9.5,3 C5.9101491,3 3,5.9101491 3,9.5 C3,13.08985 5.9101491,16 9.5,16 C13.08985,16 16,13.08985 16,9.5 C16,5.9101491 13.08985,3 9.5,3 z M9.5,0 C14.746705,0 19,4.2532949 19,9.5 C19,14.746705 14.746705,19 9.5,19 C4.2532949,19 0,14.746705 0,9.5 C0,4.2532949 4.2532949,0 9.5,0 z"> 
           <Path.RenderTransform> 
            <CompositeTransform/> 
           </Path.RenderTransform> 
           <Path.Fill> 
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
             <GradientStop Color="#FF0089FF" Offset="0"/> 
             <GradientStop Color="White" Offset="1"/> 
            </LinearGradientBrush> 
           </Path.Fill> 
          </Path> 
         </ContentPresenter> 
        </Grid> 
    </ControlTemplate> 
    
    <Style x:Key="AjaxBusyIndicator" TargetType="toolkit:BusyIndicator" > 
        <Setter Property="Template" Value="{StaticResource AjaxBusyIndicatorControlTemplate}"/> 
    </Style> 
    
  3. Utilisez-le dans votre XAML:

<Grid x:Name="LayoutRoot" Background="White"> 
    <toolkit:BusyIndicator IsBusy="True" Style="{StaticResource AjaxBusyIndicator}"> 
     <TextBox Text="TEST test test" /> 
    </toolkit:BusyIndicator> 
</Grid> 

+0

+1 Exactement ce que je cherchais. Merci – base2

1

Eh bien vraiment un scénario commun .. Silverlight devs utilisent généralement http://blogs.msdn.com/b/brada/archive/2009/03/20/silverlight-3-activity-control.aspx ce type de contrôle. mais que votre exigence est d'avoir comme AJAX Je pense que ce lien pourrait être utile: http://chrisa.wordpress.com/2008/10/09/a-wait-indicator-in-silverlight/

Voici quelques conseils sur la façon de personnaliser modèle de données pour l'indicateur occupé: http://www.jeff.wilcox.name/2009/11/busy-indicator-control/

Cordialement.

+0

Merci, mais comme je l'ai dit, je ne veux pas un nouveau contrôle, je veux le style le BusyIndicator – Mark

+0

consultez le lien que je viens d'ajouter à la publication. J'espère que cela peut aider –

Questions connexes