2013-02-17 54 views
0

我已經在WPF中編寫了一個小用戶控件,用於使用帶有文本和圖像的按鈕。它被稱爲IconButton。現在我添加了一個屬性「Orientation」,以便將圖像放在文本的左側或頂部。但是,圖像邊距必須不同。但我無法告訴圖像根據父級StackPanel的方向設置邊距。從父元素觸發

這裏是XAML代碼:

<Button 
    x:Class="MyNamespace.IconButton" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    x:Name="_this"> 

    <Button.Template> 
     <ControlTemplate> 
      <Button 
       Padding="{TemplateBinding Padding}" 
       Style="{TemplateBinding Style}" 
       Command="{TemplateBinding Button.Command}"> 

       <StackPanel Name="StackPanel" Orientation="{Binding Orientation, ElementName=_this}"> 
        <Image Name="Icon" 
         Source="{Binding IconSource, ElementName=_this}" 
         VerticalAlignment="Center" 
         Margin="0,0,10,0"> 
         <Image.Style> 
          <Style> 
           <Style.Triggers> 
            <Trigger Property="Button.IsEnabled" Value="False"> 
             <Setter Property="Image.Opacity" Value="0.3"/> 
            </Trigger> 
            <Trigger Property="StackPanel.Orientation" Value="Vertical"> 
             <Setter Property="Image.Margin" Value="0,0,0,10"/> 
            </Trigger> 
           </Style.Triggers> 
          </Style> 
         </Image.Style> 
        </Image> 
        <ContentPresenter 
         Visibility="{Binding ContentVisibility, ElementName=_this}" 
         RecognizesAccessKey="True" 
         Content="{Binding Content, ElementName=_this}" 
         VerticalAlignment="Center"/> 
       </StackPanel> 
      </Button> 
     </ControlTemplate> 
    </Button.Template> 
</Button> 

這是代碼隱藏的C#代碼:

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Text; 
using System.Windows; 
using System.Windows.Controls; 
using System.Windows.Data; 
using System.Windows.Documents; 
using System.Windows.Input; 
using System.Windows.Media; 
using System.Windows.Media.Imaging; 
using System.Windows.Navigation; 
using System.Windows.Shapes; 

namespace MyNamespace 
{ 
    public partial class IconButton : Button 
    { 
     public static DependencyProperty IconSourceProperty = DependencyProperty.Register(
      "IconSource", 
      typeof(ImageSource), 
      typeof(IconButton)); 

     public static DependencyProperty ContentVisibilityProperty = DependencyProperty.Register(
      "ContentVisibility", 
      typeof(Visibility), 
      typeof(IconButton), 
      new PropertyMetadata(Visibility.Collapsed)); 

     public static DependencyProperty OrientationProperty = DependencyProperty.Register(
      "Orientation", 
      typeof(Orientation), 
      typeof(IconButton), 
      new PropertyMetadata(Orientation.Horizontal)); 

     public ImageSource IconSource 
     { 
      get { return (ImageSource) GetValue(IconSourceProperty); } 
      set { SetValue(IconSourceProperty, value); } 
     } 

     public Visibility ContentVisibility 
     { 
      get { return (Visibility) GetValue(ContentVisibilityProperty); } 
      set { SetValue(ContentVisibilityProperty, value); } 
     } 

     public Orientation Orientation 
     { 
      get { return (Orientation) GetValue(OrientationProperty); } 
      set { SetValue(OrientationProperty, value); } 
     } 

     public IconButton() 
     { 
      InitializeComponent(); 
     } 

     protected override void OnContentChanged(object oldContent, object newContent) 
     { 
      base.OnContentChanged(oldContent, newContent); 
      ContentVisibility = (newContent is string ? !string.IsNullOrEmpty((string) newContent) : newContent != null) ? Visibility.Visible : Visibility.Collapsed; 
     } 
    } 
} 

我不知道如何使它發揮作用。我對WPF還是比較陌生的,這些觸發器讓我瘋狂。

我的嘗試是在第26行的XAML代碼中,我想查詢StackPanel.Orientation值。它編譯,但它不會觸發任何東西。

此示例中的邊距太大,但僅限於更好地查看問題。

回答

1

好像喲明確地設置MarginImage,你應該將變成一隻StyleSetter否則Trigger不會改變價值它不會重寫明確設置值。

此外,使用DataTrigger來設置Margin可能會更容易,因爲您在該類中具有Orientation依賴性屬性。

像這樣的東西應該適用於您的ImageStyle

<Image Name="Icon" Source="{Binding IconSource, ElementName=_this}" VerticalAlignment="Center"> 
    <Image.Style> 
     <Style TargetType="{x:Type Image}"> 
      <!-- move set margin to here --> 
      <Setter Property="Margin" Value="0,0,10,0"/> 
      <Style.Triggers> 
       <Trigger Property="Button.IsEnabled" Value="False"> 
        <Setter Property="Opacity" Value="0.3"/> 
       </Trigger> 
       <!-- set a DataTrigger to bind to the value of Orientation--> 
       <DataTrigger Binding="{Binding Orientation, ElementName=_this}" Value="Vertical"> 
        <Setter Property="Margin" Value="0,0,0,10"/> 
       </DataTrigger> 
      </Style.Triggers> 
     </Style> 
    </Image.Style> 
</Image> 

enter image description here

+0

謝謝你,只是完美的作品。 – ygoe 2013-02-17 21:50:32

相關問題