将 ImageButton 从 C# 转换为 XAML答案

【问题标题】：Translate ImageButton from C# to XAML将 ImageButton 从 C# 转换为 XAML
【发布时间】：2010-03-28 21:09:02
【问题描述】：

我编写了 C# 代码来创建一个 ImageButton（如下），它具有三个图像（一个基本图像和两个覆盖）和三个文本框作为按钮的正面。我继承自 Button 类，不幸的是，它包含几个组件，直到编码后我才意识到它们会出现并且需要删除，即 IsMouseOver 上的亮蓝色周围边框，以及按钮之间的任何可见边框，作为按钮最终会出现在一个 wrapPanel 中，并且边框需要是无缝的。现在该格式已在 C# 中制定，我希望我需要转换为 XAML，以便我可以创建一个 ControlTemplate 以获得必要的功能，但是我不确定从 C# 转换为 XAML 的过程。如果有人知道一个很好的概述/资源来讨论转换所需的内容以便我可以适当地翻译，我将不胜感激？谢谢。

public class ACover : Button
    {
        Image cAImage = null;
        Image jCImage = null;
        Image jCImageOverlay = null;
        TextBlock ATextBlock = null;
        TextBlock AbTextBlock = null;
        TextBlock RDTextBlock = null;
        private string _TracksXML = "";

        public ACover() 
        {
            Grid cArtGrid = new Grid();

            cArtGrid.Background = new SolidColorBrush(Color.FromRgb(38, 44, 64));
            cArtGrid.Margin = new System.Windows.Thickness(5, 10, 5, 10);
            RowDefinition row1 = new RowDefinition();
            row1.Height = new GridLength(225); 
            RowDefinition row2 = new RowDefinition();
            row2.Height = new GridLength(0, GridUnitType.Auto);
            RowDefinition row3 = new RowDefinition();
            row3.Height = new GridLength(0, GridUnitType.Auto);
            RowDefinition row4 = new RowDefinition();
            row4.Height = new GridLength(0, GridUnitType.Auto);
            cArtGrid.RowDefinitions.Add(row1);
            cArtGrid.RowDefinitions.Add(row2);
            cArtGrid.RowDefinitions.Add(row3);
            cArtGrid.RowDefinitions.Add(row4);

            ColumnDefinition col1 = new ColumnDefinition();
            col1.Width = new GridLength(0, GridUnitType.Auto);
            cArtGrid.ColumnDefinitions.Add(col1);

            jCImage = new Image();
            jCImage.Height = 240;
            jCImage.Width = 260;
            jCImage.VerticalAlignment = VerticalAlignment.Top;
            jCImage.Source = new BitmapImage(new Uri(Properties.Settings.Default.pathToGridImages + "jc.png", UriKind.Absolute));
            cArtGrid.Children.Add(jCImage);

            cArtImage = new Image();
            cArtImage.Height = 192;
            cArtImage.Width = 192;
            cArtImage.Margin = new System.Windows.Thickness(3, 7, 0, 0);
            cArtImage.VerticalAlignment = VerticalAlignment.Top;
            cArtGrid.Children.Add(cArtImage);

            jCImageOverlay = new Image();
            jCImageOverlay.Height = 192;
            jCImageOverlay.Width = 192;
            jCImageOverlay.Margin = new System.Windows.Thickness(3, 7, 0, 0);
            jCImageOverlay.VerticalAlignment = VerticalAlignment.Top;
            jCImageOverlay.Source = new BitmapImage(new Uri( Properties.Settings.Default.pathToGridImages + "jc-overlay.png", UriKind.Absolute));
            cArtGrid.Children.Add(jCImageOverlay);

            ATextBlock = new TextBlock();
            ATextBlock.Foreground = new SolidColorBrush(Color.FromRgb(173, 176, 198));
            ATextBlock.Margin = new Thickness(10, -10, 0, 0);
            cArtGrid.Children.Add(ATextBlock);

            AlTextBlock = new TextBlock();
            AlTextBlock.Margin = new Thickness(10, 0, 0, 0);
            AlTextBlock.Foreground = new SolidColorBrush(Color.FromRgb(173, 176, 198));
            cArtGrid.Children.Add(AlTextBlock);

            RDTextBlock = new TextBlock();
            RDTextBlock.Margin = new Thickness(10, 0, 0, 0);
            RDTextBlock.Foreground = new SolidColorBrush(Color.FromRgb(173, 176, 198));
            cArtGrid.Children.Add(RDTextBlock);

            Grid.SetColumn(jCImage, 0);
            Grid.SetRow(jCImage, 0);
            Grid.SetColumn(jCImageOverlay, 0);
            Grid.SetRow(jCImageOverlay, 0);
            Grid.SetColumn(cArtImage, 0);
            Grid.SetRow(cArtImage, 0);

            Grid.SetColumn(ATextBlock, 0);
            Grid.SetRow(ATextBlock, 1);
            Grid.SetColumn(AlTextBlock, 0);
            Grid.SetRow(AlTextBlock, 2);
            Grid.SetColumn(RDTextBlock, 0);
            Grid.SetRow(RDTextBlock, 3);
            this.Content = cArtGrid;
        }

        public string A
        {
            get { if (ATextBlock != null) return ATextBlock.Text;
                else return String.Empty; }
            set { if (ATextBlock != null) ATextBlock.Text = value; }
        }

        public string Al
        {
            get { if (AlTextBlock != null) return AlTextBlock.Text;
                  else return String.Empty; }
            set { if (AlTextBlock != null) AlTextBlock.Text = value; }
        }

        public string RD
        {
            get { if (RDTextBlock != null) return RDTextBlock.Text;
                  else return String.Empty; }
            set { if (RDTextBlock != null) RDTextBlock.Text = value; }
        }

        public ImageSource Image
        {
            get { if (cArtImage != null) return cArtImage.Source;
                  else return null; }
            set { if (cArtImage != null) cArtImage.Source = value; }
        }

        public string TracksXML
        {
            get { return _TracksXML; }
            set { _TracksXML = value; }
        }

        public double ImageWidth
        {
            get { if (cArtImage != null) return cArtImage.Width;
                  else return double.NaN;  }
            set { if (cArtImage != null) cArtImage.Width = value; }
        }

        public double ImageHeight
        {
            get { if (cArtImage != null) return cArtImage.Height;
                  else return double.NaN;  }
            set { if (cArtImage != null) cArtImage.Height = value; }
        }
    }

【问题讨论】：

标签： wpf xaml imagebutton

【解决方案1】：

XAML 基本上代表一个对象图，所以翻译通常应该是相当机械的：

C# new 转换为 XAML 元素标记，例如Grid cArtGrid = new Grid(); 转换为 <Grid Name="cArtGrid"></Grid>。
如果值很简单，C# 属性设置器将转换为属性，例如cArtGrid.Background = new SolidColorBrush(Color.FromRgb(38, 44, 64)); 转换为 <Grid Background="#FF262C40">。
如果属性值很复杂，则需要使用 XAML 属性元素语法。
添加到集合通常需要 XAML 属性元素语法，例如<Grid><Grid.RowDefinitions><RowDefinition Height="225" /></Grid.RowDefinitions></Grid>。
但是对于 Children 集合，您可以直接将元素放入其中，例如cArtGrid.Children.Add(jCImage); 变为 <Grid><Image ... /></Grid>。（这同样适用于 Content 属性，尽管这不会真正影响到您。）
附加属性 SetXxx 调用转换为带有点符号的属性，例如Grid.SetColumn(ATextBlock, 0); 变为 <Grid><TextBlock Grid.Column="0" /></Grid>。
您需要了解颜色和厚度等值类型是如何表示的，例如颜色的#AARRGGBB 符号和厚度的CSV 符号。 MSDN 通常会针对具有这些类型的相关类型或属性显示此内容。

一般来说，在 MSDN 中查找属性并查看 XAML 语法应该会给您一个良好的开端。

【讨论】：

【解决方案2】：

听起来您正在尝试使用一些新功能来扩展按钮。因此，您要做的第一件事是利用依赖系统，以便可以在 XAML 中绑定您的属性。查看 article on MSDN 以获取有关声明新依赖项属性的信息。

依赖属性的主要候选者是 Image 属性。

实际上，我推荐的是在 Visual Studio 中使用新的 CustomControl 模板来为您提供一些样板代码。部分样板文件声明了一个为您的控件提供默认模板的 theme.xaml 文件。该模板将保存已翻译的 XAML 以供您控制。

XAML 的好处在于它是一种初始化语言。一旦获得在 AlbumCover 上声明的依赖属性，您就可以在模板中为控件绑定它们。有关其工作原理的更多详细信息，请查看 Charles Petzold 在creating lookless controls in WPF 上的文章。

您已具备控件的基本外观和功能。遵循这两个资源应该可以帮助您融入 WPF 生态系统。

【讨论】：