2016-03-15 57 views
1

想添加樣式的按鈕,不明白爲什麼我要加入這一行的代碼,在這裏我不想任何邊框添加到我的按鈕:刪除空格填充緣周圍的ListViewItem

<Border Background="{TemplateBinding Background}"> 

的完整代碼:

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

我會記住這這樣的,但還有許多事情不能太解決了其他一些填充或保證金的問題。

當我沒有這個邊界,setter屬性的背景顏色也不起作用。

編輯 當我將它改爲下面的時候,它使我留下了按鈕周圍的填充/邊距。 我已將Setters for Margin和Padding設置爲0,但這不起作用。

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

enter image description here

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

該邊框沒有實際的「邊框」,僅用於顯示背景。沒有它,沒有任何元素可以完成這個任務,因此沒有背景。 – icebat

+0

但我的按鈕看起來像裏面有填充,因爲背景不包括整個按鈕? – Whistler

回答

1

因此,通過具有TemplateBinding您所提供的模板內的對象接收的Background該屬性。沒有它,你的Setter沒有任何實際設置。這就是爲什麼背景不起作用,因爲沒有任何內容可以接受該屬性。

但是你不一定需要Border來完成它。您也可以採取該Background="{TemplateBinding Background}"並將其直接應用到您的StackPanel,因爲它也有一個Background財產可用。

您的填充和保證金問題是一回事。你沒有在那裏實際接受你指定的Setters。所以你想要填充和保證金,你需要離開你的邊界併爲這些屬性添加TemplateBindings,或者至少支持Margin,這樣你就可以跨越兩者並通過做創建「填充」;

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

除了那麼你的背景顏色將有它周圍的空間,因爲背景是,現在也有保證金的對象。合理?與默認的Button模板進行比較,注意缺少的內容。基本上這裏的經驗法則是。如果您想將其設置爲實際控制級別,如<Button Background="blah" Margin="Blah"..../>那麼模板內的某些內容需要用於您要使用的聲明。至少在你仍然在學習模板如何工作的時候。希望這可以幫助。

補遺;

好吧,因爲我們知道了Button實際上不是你的問題,而是父母。試試這個。

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

感謝您的回答,我想我理解爲什麼,但仍然不能刪除按鈕周圍的此邊框。將在一分鐘內添加對這個問題的更改 – Whistler

+0

好的,也許我誤解了問題所在,也許只是一個圖像或其他東西來形象化問題? –

+0

示例添加圖片 – Whistler