Rimuovi margine sinistro/riempimento in ExpanderView

Question

Per impostazione predefinita, l'implementazione di un ExpanderView in un'applicazione rende i rendering dell'interfaccia utente e il controllo expanderView ha applicato questo margine sinistro, una sorta di rientro. È piuttosto stupido davvero che sia così per impostazione predefinita.

C'è un modo per sbarazzarsi di quel margine e solo che il controllo fluttua completamente a sinistra?

Inoltre, come si aggiunge del testo al rettangolo degli espansori? Nessuna proprietà disponibile.

Answer 1

Hai solo bisogno di modificare il modello di controllo per l'Expander. Se si dispone di Expression Blend, rende facile e veloce. Dovresti semplicemente fare clic con il pulsante destro del mouse sull'espansione sulla tavola da disegno, scegliere "Modifica modello", quindi scegliere di modificare quella corrente o una copia che potresti creare e inserire un dizionario di risorse separato. Ecco un modello di esempio. Notare il margine di 11,0,0,0 sugli articoliCanvas verso il basso? È possibile utilizzare questo stesso metodo per modificare quasi tutti i modelli di controlli. :)

<Style x:Key="ExpanderViewStyle1" TargetType="toolkit:ExpanderView"> 
      <Setter Property="HorizontalAlignment" Value="Stretch"/> 
      <Setter Property="HorizontalContentAlignment" Value="Stretch"/> 
      <Setter Property="ItemsPanel"> 
       <Setter.Value> 
        <ItemsPanelTemplate> 
         <StackPanel/> 
        </ItemsPanelTemplate> 
       </Setter.Value> 
      </Setter> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="toolkit:ExpanderView"> 
         <Grid> 
          <Grid.Resources> 
           <QuadraticEase x:Key="QuadraticEaseOut" EasingMode="EaseOut"/> 
           <QuadraticEase x:Key="QuadraticEaseInOut" EasingMode="EaseInOut"/> 
          </Grid.Resources> 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition Width="41"/> 
           <ColumnDefinition Width="*"/> 
          </Grid.ColumnDefinitions> 
          <Grid.RowDefinitions> 
           <RowDefinition Height="Auto"/> 
           <RowDefinition Height="Auto"/> 
           <RowDefinition Height="Auto"/> 
          </Grid.RowDefinitions> 
          <VisualStateManager.VisualStateGroups> 
           <VisualStateGroup x:Name="ExpansionStates"> 
            <VisualStateGroup.Transitions> 
             <VisualTransition From="Collapsed" GeneratedDuration="0:0:0.15" To="Expanded"> 
              <Storyboard> 
               <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="ItemsCanvas"> 
                <EasingDoubleKeyFrame EasingFunction="{StaticResource QuadraticEaseOut}" KeyTime="0:0:0.00" Value="0"/> 
                <EasingDoubleKeyFrame x:Name="CollapsedToExpandedKeyFrame" EasingFunction="{StaticResource QuadraticEaseOut}" KeyTime="0:0:0.15" Value="1"/> 
               </DoubleAnimationUsingKeyFrames> 
               <DoubleAnimation Duration="0" To="1.0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ItemsCanvas"/> 
              </Storyboard> 
             </VisualTransition> 
             <VisualTransition From="Expanded" GeneratedDuration="0:0:0.15" To="Collapsed"> 
              <Storyboard> 
               <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="ItemsCanvas"> 
                <EasingDoubleKeyFrame x:Name="ExpandedToCollapsedKeyFrame" EasingFunction="{StaticResource QuadraticEaseInOut}" KeyTime="0:0:0.00" Value="1"/> 
                <EasingDoubleKeyFrame EasingFunction="{StaticResource QuadraticEaseInOut}" KeyTime="0:0:0.15" Value="0"/> 
               </DoubleAnimationUsingKeyFrames> 
               <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ItemsCanvas"> 
                <EasingDoubleKeyFrame EasingFunction="{StaticResource QuadraticEaseInOut}" KeyTime="0:0:0.00" Value="1.0"/> 
                <EasingDoubleKeyFrame EasingFunction="{StaticResource QuadraticEaseInOut}" KeyTime="0:0:0.15" Value="0.0"/> 
               </DoubleAnimationUsingKeyFrames> 
               <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="ItemsCanvas"> 
                <EasingDoubleKeyFrame EasingFunction="{StaticResource QuadraticEaseInOut}" KeyTime="0:0:0.00" Value="0.0"/> 
                <EasingDoubleKeyFrame EasingFunction="{StaticResource QuadraticEaseInOut}" KeyTime="0:0:0.15" Value="-35"/> 
               </DoubleAnimationUsingKeyFrames> 
              </Storyboard> 
             </VisualTransition> 
            </VisualStateGroup.Transitions> 
            <VisualState x:Name="Collapsed"/> 
            <VisualState x:Name="Expanded"> 
             <Storyboard> 
              <DoubleAnimation Duration="0" Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="ItemsCanvas"/> 
              <DoubleAnimation Duration="0" To="1.0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ItemsCanvas"/> 
             </Storyboard> 
            </VisualState> 
           </VisualStateGroup> 
           <VisualStateGroup x:Name="ExpandabilityStates"> 
            <VisualState x:Name="Expandable"/> 
            <VisualState x:Name="NonExpandable"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="ExpandableContent"> 
               <DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="Collapsed"/> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Line"> 
               <DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="Collapsed"/> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="NonExpandableContent"> 
               <DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="Visible"/> 
              </ObjectAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
           </VisualStateGroup> 
          </VisualStateManager.VisualStateGroups> 
          <ListBoxItem x:Name="ExpandableContent" Grid.ColumnSpan="2" Grid.Column="0" toolkit:TiltEffect.IsTiltEnabled="True" Grid.Row="0" Grid.RowSpan="2"> 
           <Grid> 
            <Grid.ColumnDefinitions> 
             <ColumnDefinition Width="41"/> 
             <ColumnDefinition Width="*"/> 
            </Grid.ColumnDefinitions> 
            <Grid.RowDefinitions> 
             <RowDefinition Height="Auto"/> 
             <RowDefinition Height="Auto"/> 
             <RowDefinition Height="Auto"/> 
            </Grid.RowDefinitions> 
            <ContentControl x:Name="Header" Grid.ColumnSpan="2" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="0" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" Grid.Row="0"/> 
            <ContentControl x:Name="Expander" ContentTemplate="{TemplateBinding ExpanderTemplate}" Content="{TemplateBinding Expander}" Grid.Column="1" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" Margin="11,0,0,0" Grid.Row="1"/> 
            <Grid x:Name="ExpanderPanel" Background="Transparent" Grid.ColumnSpan="2" Grid.Column="0" Grid.Row="0" Grid.RowSpan="2"/> 
           </Grid> 
          </ListBoxItem> 
          <Line x:Name="Line" Grid.Column="1" HorizontalAlignment="Left" Grid.Row="1" Grid.RowSpan="2" Stretch="Fill" Stroke="{StaticResource PhoneSubtleBrush}" StrokeThickness="3" X1="0" X2="0" Y1="0" Y2="1"/> 
          <ContentControl x:Name="NonExpandableContent" Grid.ColumnSpan="2" ContentTemplate="{TemplateBinding NonExpandableHeaderTemplate}" Content="{TemplateBinding NonExpandableHeader}" Grid.Column="0" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" Grid.Row="0" Grid.RowSpan="2" Visibility="Collapsed"/> 
          <Canvas x:Name="ItemsCanvas" Grid.Column="1" Margin="11,0,0,0" Opacity="0.0" Grid.Row="2"> 
           <Canvas.RenderTransform> 
            <CompositeTransform TranslateY="0.0"/> 
           </Canvas.RenderTransform> 
           <ItemsPresenter x:Name="Presenter"/> 
          </Canvas> 
         </Grid> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 

In entrambi i casi, una volta trovato il modello di controllo è veloce e indolore. Spero che questo ti aiuti!

Answer 2

È tardi ma forse aiuterà qualcuno. Rimuovo quel margine in questo stile. Ho eliminato le colonne dalla griglia predefinita. Inoltre lo creo come pannello di Wrap. Può essere modificato in ItemsPanelTemplate.

<Style x:Key="ExpanderViewStyle" TargetType="toolkit:ExpanderView"> 
    <Setter Property="HorizontalAlignment" Value="Stretch"/> 
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/> 
    <Setter Property="ItemsPanel"> 
     <Setter.Value> 
      <ItemsPanelTemplate> 
       <toolkit:WrapPanel/> 
      </ItemsPanelTemplate> 
     </Setter.Value> 
    </Setter> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="toolkit:ExpanderView"> 
       <Grid> 
        <Grid.Resources> 
         <QuadraticEase x:Key="QuadraticEaseOut" EasingMode="EaseOut"/> 
         <QuadraticEase x:Key="QuadraticEaseInOut" EasingMode="EaseInOut"/> 
        </Grid.Resources> 
        <Grid.RowDefinitions> 
         <RowDefinition Height="Auto"/> 
         <RowDefinition Height="Auto"/> 
         <RowDefinition Height="Auto"/> 
        </Grid.RowDefinitions> 
        <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup x:Name="ExpansionStates"> 
          <VisualStateGroup.Transitions> 
           <VisualTransition From="Collapsed" GeneratedDuration="0:0:0.15" To="Expanded"> 
            <Storyboard> 
             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="ItemsCanvas"> 
              <EasingDoubleKeyFrame EasingFunction="{StaticResource QuadraticEaseOut}" KeyTime="0:0:0.00" Value="0"/> 
              <EasingDoubleKeyFrame x:Name="CollapsedToExpandedKeyFrame" EasingFunction="{StaticResource QuadraticEaseOut}" KeyTime="0:0:0.15" Value="1"/> 
             </DoubleAnimationUsingKeyFrames> 
             <DoubleAnimation Duration="0" To="1.0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ItemsCanvas"/> 
            </Storyboard> 
           </VisualTransition> 
           <VisualTransition From="Expanded" GeneratedDuration="0:0:0.15" To="Collapsed"> 
            <Storyboard> 
             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="ItemsCanvas"> 
              <EasingDoubleKeyFrame x:Name="ExpandedToCollapsedKeyFrame" EasingFunction="{StaticResource QuadraticEaseInOut}" KeyTime="0:0:0.00" Value="1"/> 
              <EasingDoubleKeyFrame EasingFunction="{StaticResource QuadraticEaseInOut}" KeyTime="0:0:0.15" Value="0"/> 
             </DoubleAnimationUsingKeyFrames> 
             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ItemsCanvas"> 
              <EasingDoubleKeyFrame EasingFunction="{StaticResource QuadraticEaseInOut}" KeyTime="0:0:0.00" Value="1.0"/> 
              <EasingDoubleKeyFrame EasingFunction="{StaticResource QuadraticEaseInOut}" KeyTime="0:0:0.15" Value="0.0"/> 
             </DoubleAnimationUsingKeyFrames> 
             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="ItemsCanvas"> 
              <EasingDoubleKeyFrame EasingFunction="{StaticResource QuadraticEaseInOut}" KeyTime="0:0:0.00" Value="0.0"/> 
              <EasingDoubleKeyFrame EasingFunction="{StaticResource QuadraticEaseInOut}" KeyTime="0:0:0.15" Value="-35"/> 
             </DoubleAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualTransition> 
          </VisualStateGroup.Transitions> 
          <VisualState x:Name="Collapsed"> 
           <Storyboard> 
            <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="ItemsCanvas"/> 
            <DoubleAnimation Duration="0" To="0.0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ItemsCanvas"/> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Expanded"> 
           <Storyboard> 
            <DoubleAnimation Duration="0" Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="ItemsCanvas"/> 
            <DoubleAnimation Duration="0" To="1.0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ItemsCanvas"/> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
         <VisualStateGroup x:Name="ExpandabilityStates"> 
          <VisualState x:Name="Expandable"/> 
          <VisualState x:Name="NonExpandable"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="ExpandableContent"> 
             <DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="Collapsed"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="NonExpandableContent"> 
             <DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="Visible"/> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 
        <ListBoxItem x:Name="ExpandableContent" toolkit:TiltEffect.IsTiltEnabled="True" Grid.Row="0" Grid.RowSpan="2"> 
         <Grid> 
          <Grid.RowDefinitions> 
           <RowDefinition Height="Auto"/> 
           <RowDefinition Height="Auto"/> 
           <RowDefinition Height="Auto"/> 
          </Grid.RowDefinitions> 
          <ContentControl x:Name="Header" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" Grid.Row="0"/> 
          <ContentControl x:Name="Expander" ContentTemplate="{TemplateBinding ExpanderTemplate}" Content="{TemplateBinding Expander}" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" Grid.Row="1"/> 
          <Grid x:Name="ExpanderPanel" Background="Transparent" Grid.Row="0" Grid.RowSpan="2"/> 
         </Grid> 
        </ListBoxItem> 

        <ContentControl x:Name="NonExpandableContent" ContentTemplate="{TemplateBinding NonExpandableHeaderTemplate}" Content="{TemplateBinding NonExpandableHeader}" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" Grid.Row="0" Grid.RowSpan="2" Visibility="Collapsed"/> 
        <Canvas x:Name="ItemsCanvas" Opacity="0.0" Grid.Row="2"> 
         <Canvas.RenderTransform> 
          <CompositeTransform TranslateY="0.0"/> 
         </Canvas.RenderTransform> 
         <ItemsPresenter x:Name="Presenter"/> 
        </Canvas> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style>