刪除ExpanderView中的左邊距/填充

Question

默認情況下，在UI呈現的應用程序中實現ExpanderView，並且expanderView控件將此左邊距應用於其中，某種縮進。這真的很愚蠢，它是這樣的默認情況。

有沒有辦法擺脫那個邊距，只是控制完全浮動到左邊？

另外，如何將一些文本添加到擴展器矩形？沒有這樣的財產可用。

Answer 1

您只需編輯擴展器的控制模板。如果你有Expression Blend，它可以快速簡單地完成。您只需在美工板上右鍵單擊擴展器，選擇「編輯模板」，然後選擇編輯當前的模板，或者製作一個副本，並將其放入單獨的資源字典中。這是一個示例模板。 注意物品底部的11,0,0,0邊距？您可以使用相同的方法編輯任何控件模板。 :)

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

無論哪種方式，一旦你找到控制模板，它的快速和無痛。希望這可以幫助！

Answer 2

它已經晚了，但也許它會幫助別人。我以這種風格去除了這個邊距。我從默認網格中刪除了列。此外，我創建它作爲包裝面板。它可以在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>