Mẫu nút tùy chỉnh trong WPF

Question

Tôi muốn tạo một mẫu nút đơn giản với hình ảnh và văn bản bên trong nó. Nhưng tôi muốn giữ cho giao diện của nút Hệ thống.

Làm cách nào để tạo, từng bước?

P .: tôi đã thử nó với CustomControl trong WPF và BasedOn tài sản.

Answer 1

Bạn có thể làm điều này dễ dàng với một phong cách và kèm theo tài sản:

<ResourceDictionary 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:ap="clr-namespace:MyProject.Namespace.Path.To.ButtonProperties"> 
    ... 
    <Style x:Key="ImageButton" TargetType="Button"> 
     <Setter Property="ContentTemplate"> 
      <Setter.Value> 
       <DataTemplate> 
        <StackPanel Orientation="Horizontal"> 
         <Image Source="{Binding Path=(ap:ButtonProperties.Image), RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}"></Image> 
         <ContentPresenter Content="{Binding Path=Content, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}"></ContentPresenter> 
        </StackPanel> 
       </DataTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
    ... 
</ResourceDictionary> 

và

public class ButtonProperties 
{ 
    public static ImageSource GetImage(DependencyObject obj) 
    { 
     return (ImageSource)obj.GetValue(ImageProperty); 
    } 

    public static void SetImage(DependencyObject obj, ImageSource value) 
    { 
     obj.SetValue(ImageProperty, value); 
    } 

    public static readonly DependencyProperty ImageProperty = 
     DependencyProperty.RegisterAttached("Image", typeof(ImageSource), typeof(ButtonProperties), new UIPropertyMetadata((ImageSource)null)); 
} 

Sau đó trong đánh dấu:

<Button Style="{StaticResource ImageButton}" ap:ButtonProperties.Image="{StaticResource MyImage}" Content="Test"> 
</Button> 

Ví dụ này trông khá xấu xí, nhưng bạn có thể dễ dàng thay đổi StackPanel đến một Grid hoặc một cái gì đó tương tự như hạn chế tỷ lệ hình ảnh. Sử dụng ContentPresenter cho phép bạn bảo vệ các hành vi của một nút cho phép bạn đặt bất kỳ UIElement bên trong, và duy trì sự ủng hộ lệnh, vv

Answer 2

tôi cuối cùng đã tạo ra một nút với hình ảnh + text bên trong nó:

Dưới đây là Bộ luật đầy đủ:

Bước 1: Tạo một User Control mới được gọi là: ImageButtonUC

<UserControl Name="ImageButton" x:Class="WpfApp.ImageButtonUC" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 
    <Grid> 
     <Button VerticalAlignment="Top" Width="100" Height="25" Click="button_Click"> 
      <Button.Content> 
       <StackPanel Orientation="Horizontal"> 
        <Image Width="16" Height="16" Margin="5,0,5,0" Source="{Binding ElementName=ImageButton, Path=Image}"/> 
        <TextBlock Text="{Binding ElementName=ImageButton, Path=Text}"/> 
       </StackPanel> 
      </Button.Content> 
     </Button> 
    </Grid> 
</UserControl> 

Bước 2: Chỉnh sửa ImageButtonUC.xaml.cs

public partial class ImageButtonUC : UserControl 
    { 
     public event RoutedEventHandler Click; 

     public ImageButtonUC() 
     { 
      InitializeComponent(); 

     } 

     public string Text 
     { 
      get { return (string)GetValue(TextProperty); } 
      set { SetValue(TextProperty, value); } 
     } 


     public static readonly DependencyProperty TextProperty = 
      DependencyProperty.Register("Text", typeof(string), typeof(ImageButtonUC), new UIPropertyMetadata("")); 

     public ImageSource Image 
     { 
      get { return (ImageSource)GetValue(ImageProperty); } 
      set { SetValue(ImageProperty, value); } 
     } 

     public static readonly DependencyProperty ImageProperty = 
      DependencyProperty.Register("Image", typeof(ImageSource), typeof(ImageButtonUC), new UIPropertyMetadata(null)); 


     private void button_Click(object sender, RoutedEventArgs e) 
     { 

      if (null != Click) 

       Click(sender, e); 

     } 

    } 

Bước 3: Trong xaml bạn có thể sử dụng nó theo cách này: Thêm không gian tên như

xmlns:Local="clr-namespace:WpfApp" 

Và sử dụng nó như:

<Local:ImageButtonUC x:Name="buttonImg" Width="100" Margin="10,0,10,0" Image="/WpfApp;component/Resources/Img.bmp" Text="Browse..." Click="buttonImg_Click"/> 

Lưu ý: Hình ảnh của tôi là loacted trong thư mục Resources đây

tham khảo:

http://blogs.msdn.com/knom/archive/2007/10/31/wpf-control-development-3-ways-to-build-an-imagebutton.aspx

Answer 3

Nếu bạn không muốn viết bất kỳ mã-đằng sau, có một cách khác để làm điều này (lấy cảm hứng từ câu trả lời của jeffora). Bạn có thể sử dụng trường Content của kiểm soát để đưa URI để hình ảnh mà bạn muốn thấy trong nút của bạn:

<Button Content="https://www.google.com/images/srpr/logo3w.png" Height="100" Width="200" Style="{DynamicResource ButtonStyle1}"/> 

Và sau đó bạn có thể chỉnh sửa Style Nút mặc định để trông như thế này:

<Style> 
... 
<Setter Property="Template"> 
    <Setter.Value> 
     <ControlTemplate TargetType="{x:Type Button}"> 
      <Microsoft_Windows_Themes:ButtonChrome x:Name="Chrome" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" RenderDefaulted="{TemplateBinding IsDefaulted}" SnapsToDevicePixels="true"> 
       <Image x:Name="theImage" Source="{Binding Path=Content, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}" Margin="4,0,0,0"> 
        <Image.ToolTip> 
         <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
        </Image.ToolTip> 
       </Image> 
      </Microsoft_Windows_Themes:ButtonChrome> 
      <ControlTemplate.Triggers> 
       ... 
      </ControlTemplate.Triggers> 
     </ControlTemplate> 
    </Setter.Value> 
</Setter> 
</Style> 

Phép thuật nằm trong phần 'Source = (Binding ...}'. Nó đã làm việc tốt cho tôi để có ToolTip ở đó để gỡ lỗi những hình ảnh bị mất/thay đổi - nhưng cũng có thể dễ dàng bị loại bỏ.

Answer 4

Đây là giải pháp của tôi!

<Button Content="Browse" Margin="10" Name="btBrowse"> 
      <Button.Template> 
       <ControlTemplate> 
        <StackPanel Orientation="Vertical" Height="50" Margin="5" VerticalAlignment="Center" HorizontalAlignment="Center"> 
         <Image Source="MyIcons\browse.png" Height="30" /> 
         <TextBlock Text="{Binding ElementName=btBrowse, Path=Content}" VerticalAlignment="Center" HorizontalAlignment="Center" /> 
        </StackPanel> 
       </ControlTemplate> 
      </Button.Template> 
     </Button> 

Kết quả là dưới đây:

Answer 5

Một câu trả lời - cải thiện về u// NP dogracer và u Dave:

---

<Button Content = "{Binding object}" > 
    <Button.Style > 
     <Style TargetType="Button"> 
      <Setter Property = "ContentTemplate" > 
       <Setter.Value > 
        <DataTemplate > 
         <StackPanel > 
          <Image Source="{Binding Path=Content.ImageUrl, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}" > 
           <TextBlock Text = "{Binding Path=Content.Text,RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}" /> 
         </ StackPanel > 
        </ DataTemplate > 
       </ Setter.Value > 
      </ Setter > 
     </ Style > 
    </ Button.Style > 
</ Button > 

1. Content là liên kết với 'đối tượng' với thuộc tính 'ImageUrl' và 'Text'.
2. Điều này hoạt động trong một điều khiển người dùng bên ngoài hội đồng chính.
3. Kiểu là nút thông thường