删除ListViewItem周围的空间填充边距

Question

Would like to add style to the button, and don't understand why I have to include this line of code, where I don't want to add any Border to my button:

<Border Background="{TemplateBinding Background}">

The complete code:

<Style x:Key="ButtonStyleRed" TargetType="{x:Type Button}">
    <Setter Property="OverridesDefaultStyle" Value="True"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Background="{TemplateBinding Background}">
                    <StackPanel Orientation="Horizontal" Width="200">
                        <Rectangle Width="4" Height="30" Fill="#64dd17" Margin="0,0,10,1" RadiusX="2" RadiusY="2"/>
                        <TextBlock Text="{Binding Path=DataContext.FlowStageName,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type Button}}}" 
                                   VerticalAlignment="Center" FontSize="14" Foreground="White" TextWrapping="WrapWithOverflow"/>
                    </StackPanel>
                 </Border>
                 <ControlTemplate.Triggers>
                    <Trigger Property="IsFocused" Value="True"/>
                    <Trigger Property="IsDefaulted" Value="True"/>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="#263238"></Setter>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True"/>
                    <Trigger Property="IsEnabled" Value="False"/>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="HorizontalAlignment" Value="Left"/>
    <Setter Property="Margin" Value="0"/>
    <Setter Property="Padding" Value="0"></Setter>
    <Setter Property="Width" Value="200"/>
    <Setter Property="Height" Value="50"/>
    <Setter Property="Background" Value="#37474f"/>
    <Setter Property="BorderThickness" Value="0"/>
</Style>

I would keep this like that but there are some other padding or margin issues which I can't resolved too.

When I don't have this border, Setter Property for Background color also doesn't work.

EDIT When I change it to below, it leave me with the padding/margin around the button. I have set Setters for Margin and Padding to 0, but this doesn't work.

<StackPanel Orientation="Horizontal" Width="200" Background="{TemplateBinding Background}" Margin="{TemplateBinding Padding}">
                      <Rectangle Width="4" Height="30" Fill="#64dd17" Margin="0,0,10,1" RadiusX="2" RadiusY="2"/>
                      <TextBlock Text="{Binding Path=DataContext.FlowStageName,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type Button}}}" 
                                   VerticalAlignment="Center" FontSize="14" Foreground="White" TextWrapping="WrapWithOverflow"/>
                 </StackPanel>

EDIT2

<views:BaseView.Resources>
    <views:SwapBooleanValueConverter x:Key="SwapBooleanValueConverter" />
    <DataTemplate x:Key="FlowStagesTemplate">
        <StackPanel>
            <Button x:Name="MenuStageButton"
                    Tag="{Binding ID}"
                    Command="{Binding DataContext.OnButtonClickCommand, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}" 
                    CommandParameter="{Binding ElementName=TurulStageButton}"
                    Style="{Binding FlowStageDisplayStyle}">
            </Button>
            <Rectangle VerticalAlignment="Stretch" Width="200" Margin="0" Height="1">
                <Rectangle.Fill>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="1,0" >
                        <GradientStop Color="#263238" Offset="0" />
                        <GradientStop Color="#78909c" Offset="0.5" />
                        <GradientStop Color="#263238" Offset="1.0" />
                    </LinearGradientBrush>
                </Rectangle.Fill>
            </Rectangle>
        </StackPanel>
    </DataTemplate>
</views:BaseView.Resources>
<StackPanel Background="#263238">
    <ListView ItemsSource="{Binding FlowStagesSubMenu}" ItemTemplate="{StaticResource FlowStagesTemplate}" 
              BorderThickness="0" Background="#263238" ScrollViewer.HorizontalScrollBarVisibility="Disabled" >
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Vertical"/>
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
    </ListView>
</StackPanel>

Answer 1

So by having that TemplateBinding you're providing THE object inside the template to receive that property of Background . Without it, there's nothing for your Setter to actually set. Which is why Background doesn't work, because there's nothing in there accepting that property.

However you don't necessarily need the Border to accomplish it. You could also just take that Background="{TemplateBinding Background}" and apply it directly to your StackPanel since it also has a Background property available anyway.

Your padding and margin issues are the same thing. You have no where in there to actually accept the Setters you're specifying. So you want padding and margin you'll either need to leave your Border and add TemplateBindings for those properties, or StackPanel atleast supports Margin so you could cross the two and create "Padding" by doing;

<StackPanel Margin="{TemplateBinding Padding}"..../>

Except then your background color will have space around it since Background is on the object that now also has margin. Make sense? Compare to a default Button template and notice what's missing. Basically the rule of thumb here is. If you want to set it at the actual control level like <Button Background="blah" Margin="Blah"..../> then something inside the template needs to be available for that declaration you're trying to use. At least while you're still learning how templating works anyway. Hope this helps.

Addendum;

Ok so since we figured out Button isn't actually your issue but the parent. Try this instead.

<ListView ItemsSource="{Binding FlowStagesSubMenu}" 
          ItemTemplate="{StaticResource FlowStagesTemplate}" 
          BorderThickness="0" Background="#263238"
          ScrollViewer.HorizontalScrollBarVisibility="Disabled" >
   <ListView.ItemContainerStyle>
      <Style TargetType="ListViewItem">
         <Setter Property="Padding" Value="0"/>
         <Setter Property="Margin" Value="0"/>
         <Setter Property="BorderThickness" Value="0"/>
      </Style>
   </ListView.ItemContainerStyle>
   <ListView.ItemsPanel>
      <ItemsPanelTemplate>
         <StackPanel Orientation="Vertical"/>
      </ItemsPanelTemplate>
   </ListView.ItemsPanel>
</ListView>