2012-10-17 10 views
12

Wenn Sie ein ExpanderView in einer Anwendung standardmäßig implementieren, rendert die Benutzeroberfläche und das ExpanderView-Steuerelement hat diesen linken Rand angewendet, eine Art Einrückung. Es ist ziemlich dumm, dass es standardmäßig so ist.Entfernen Sie den linken Rand/Abstand in ExpanderView

Gibt es eine Möglichkeit, diesen Rand loszuwerden und nur, dass die Steuerung vollständig nach links schwebt?

Wie fügt man auch etwas Text zum Expanderrechteck hinzu? Keine solche Eigenschaft verfügbar.

+0

Ich habe versucht, eine negative Marge, die funktioniert hat. Aber der Explader hörte dann völlig auf zu arbeiten ... – Tiwaz89

+0

Sie gehen davon aus, dass Ihre Antwort für mich funktioniert hat. Ich habe deine gegebene Lösung noch nicht getestet, aber ich habe dir trotzdem die Prämie zugesprochen. – Tiwaz89

+0

Keine Notwendigkeit, etwas zu vergeben, wenn Ihre Frage nicht beantwortet wurde. Besiegt den Zweck. –

Antwort

12

Sie müssen nur die Steuerungsvorlage für den Expander bearbeiten. Wenn Sie Expression Blend haben, ist es schnell und einfach. Sie würden einfach mit der rechten Maustaste auf den Expander auf der Zeichenfläche klicken, "Vorlage bearbeiten" wählen und dann entweder die aktuelle oder eine Kopie bearbeiten und in ein separates Ressourcenwörterbuch einfügen. Hier ist eine Beispielvorlage. Beachten Sie die 11,0,0,0 Margin auf den ArtikelnCanvas nach unten? Sie können diese Methode auch zum Bearbeiten von Steuerelementen verwenden. :)

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

Wie auch immer, sobald Sie die Kontrollschablone finden, ist es schnell und schmerzlos. Hoffe das hilft!

0

Es ist spät, aber vielleicht wird es jemandem helfen. Ich entferne diesen Rand in diesem Stil. Ich habe Spalten aus dem Standardraster gelöscht. Außerdem erstelle ich es als Wrap-Panel. Es kann in ItemsPanelTemplate geändert werden.

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