如何在Expression Blend混合中创建自定义按钮？

Question

我在表达式设计中创建了一个图像，我试图导入到Blend中以创建一个按钮。我试图让按钮与它的容器（最有可能是一个网格）缩放，当我调整它在Blend中。不幸的是，这两种产品的文档都不是很有帮助。在设计中的XAML如下所示：

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="Document" Width="61" Height="61" Clip="F1 M 0,0L 61,0L 61,61L 0,61L 0,0"> 
<Canvas x:Name="MinimizeButtonBase" Width="799.999" Height="600" Canvas.Left="0" Canvas.Top="0"> 
    <Viewbox x:Name="Group" Width="61" Height="61" Canvas.Left="0" Canvas.Top="0"> 
     <Canvas Width="61" Height="61"> 
      <Path x:Name="Path" Width="61" Height="61" Canvas.Left="0" Canvas.Top="3.05176e-005" Stretch="Fill" StrokeLineJoin="Round" Stroke="#B0000000" Data="F1 M 5.5,0.500031L 55.5,0.500031C 58.2614,0.500031 60.5,2.73859 60.5,5.5L 60.5,55.5C 60.5,58.2614 58.2614,60.5 55.5,60.5L 5.5,60.5C 2.73859,60.5 0.5,58.2614 0.5,55.5L 0.5,5.5C 0.5,2.73859 2.73859,0.500031 5.5,0.500031 Z "> 
       <Path.Fill> 
        <LinearGradientBrush StartPoint="0.561118,0.955553" EndPoint="0.58334,-0.177781"> 
         <LinearGradientBrush.GradientStops> 
          <GradientStop Color="#B0000000" Offset="0"/> 
          <GradientStop Color="#B0FFFFFF" Offset="1"/> 
         </LinearGradientBrush.GradientStops> 
        </LinearGradientBrush> 
       </Path.Fill> 
      </Path> 
      <Path x:Name="Line" Width="49.2547" Height="5" Canvas.Left="5.23578" Canvas.Top="47" Stretch="Fill" StrokeThickness="5" StrokeLineJoin="Round" Stroke="#B0000000" Data="M 7.73578,49.5L 51.9904,49.5"/> 
     </Canvas> 
    </Viewbox> 
</Canvas> 

有谁知道的措施在设计导入一个简单的2路图像以使得它在共混物中的按钮？当我将下面的xaml添加到混合中的资源文件中时，在将其转换为控件后重新调整大小时，我无法使按钮缩放到它的容器。

Answer 1

问题在于您使用的容器类型以及它生成的XAML的复杂性，画布是绝对定位，不应该用于真正的比例。为了解决这个问题，你有一个模拟比例的视图框，但这不是必需的。

我已经在表达式3中启动了一个项目，并添加了一个用户控件，将代码粘贴在那里，然后处理它。下水平路径相对于按钮底部的位置并不清楚，如果您需要更改其位置和宽度，请适当更改网格列高度和宽度值，并将它们保持为比例而不是绝对数字。

<UserControl 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" 
    x:Class="WpfApplication1.UserControl1" 
    x:Name="UserControl"> 

    <Grid x:Name="Document"> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="1*"/> 
      <ColumnDefinition Width="8*"/> 
      <ColumnDefinition Width="1*"/> 
     </Grid.ColumnDefinitions> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="8*"/> 
      <RowDefinition Height="1*"/> 
      <RowDefinition Height="1*"/> 
     </Grid.RowDefinitions> 
     <Path Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" Grid.RowSpan="3" 
       x:Name="Path" 
       Stretch="Fill" StrokeLineJoin="Round" Stroke="#B0000000" 
       Data="F1 M 5.5,0.500031L 55.5,0.500031C 58.2614,0.500031 60.5,2.73859 60.5,5.5L 60.5,55.5C 60.5,58.2614 58.2614,60.5 55.5,60.5L 5.5,60.5C 2.73859,60.5 0.5,58.2614 0.5,55.5L 0.5,5.5C 0.5,2.73859 2.73859,0.500031 5.5,0.500031 Z "> 
      <Path.Fill>       
       <LinearGradientBrush StartPoint="0.561118,0.955553" EndPoint="0.58334,-0.177781">   
        <LinearGradientBrush.GradientStops> 
         <GradientStop Color="#B0000000" Offset="0"/>       
         <GradientStop Color="#B0FFFFFF" Offset="1"/>  
        </LinearGradientBrush.GradientStops> 
       </LinearGradientBrush>      
      </Path.Fill>      
     </Path>  
     <Path x:Name="Line" Stretch="Fill" 
      StrokeThickness="5" StrokeLineJoin="Round" Stroke="#B0000000" 
      Data="M 7.73578,49.5L 51.9904,49.5" 
      Grid.Row="1" Grid.Column="1" Grid.RowSpan="2" /> 
    </Grid> 
</UserControl> 

如果它要成为一个适当的控制，那么你将不得不开始以这种或那种形式将内容呈现，但应该解决您的大小调整的问题。

编辑：我已经取出了一些额外的对齐和边距，因为他们已经不再需要了。

Answer 2

使事物可伸缩的最简单的布局容器是ViewBox。它是WPF中的标准控件，在Silverlight中它是（我认为）在SL工具箱中。