Silverlight中的单侧圆形按钮

如何解决Silverlight中的单侧圆形按钮

| 我想在Silverlight中收集按钮。 它们在从左到右的集合中，并且按钮排列成一行，以便它们左右接触。 这是摩擦： 集合具有圆角，但是集合中结束按钮之间的按钮没有倒角。因此，基本上，对于集合最左侧和右侧的按钮，它们必须有些特殊，因为它们必须具有一个扁平的垂直侧和一个圆形的侧。这可以在Silverlight中完成而无需诉诸末端按钮的特殊位图吗？ 我的一个想法是以某种方式声明一个具有位图背景的画布，然后具有重叠的椭圆和矩形

        <Canvas Height=\"100\" HorizontalAlignment=\"Left\" Margin=\"189,381,0\" VerticalAlignment=\"Top\" Width=\"200\" Background=\"Black\">
            <Rectangle Fill=\"#FFF4F4F5\" HorizontalAlignment=\"Left\"  Stroke=\"Black\" Width=\"58\" Height=\"61\" Canvas.Left=\"7\" Canvas.Top=\"16\" />
            <Ellipse Fill=\"#FFF4F4F5\" HorizontalAlignment=\"Left\"  Stroke=\"White\" Width=\"65\" StrokeThickness=\"0\" Height=\"59\" Canvas.Left=\"31\" Canvas.Top=\"17\" />
        </Canvas> 

    

解决方法

        这是您尝试实现的效果的一个简单示例，该效果利用自定义

ControlTemplate

通过三种方式对按钮进行外观设置：

<Grid HorizontalAlignment=\"Center\">
    <Grid.Resources>
        <Style x:Key=\"ButtonLeftStyle\" TargetType=\"Button\">
            <Setter Property=\"Template\">
                <Setter.Value>
                    <ControlTemplate TargetType=\"Button\">
                        <Border Background=\"DarkGray\" CornerRadius=\"10,10\">
                            <ContentPresenter HorizontalAlignment=\"Center\" VerticalAlignment=\"Center\"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key=\"ButtonCenterStyle\" TargetType=\"Button\">
            <Setter Property=\"Template\">
                <Setter.Value>
                    <ControlTemplate TargetType=\"Button\">
                        <Border Background=\"DarkGray\" CornerRadius=\"0,0\">
                            <ContentPresenter HorizontalAlignment=\"Center\" VerticalAlignment=\"Center\"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key=\"ButtonRightStyle\" TargetType=\"Button\">
            <Setter Property=\"Template\">
                <Setter.Value>
                    <ControlTemplate TargetType=\"Button\">
                        <Border Background=\"DarkGray\" CornerRadius=\"0,10,0\">
                            <ContentPresenter HorizontalAlignment=\"Center\" VerticalAlignment=\"Center\"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Grid.Resources>
    <StackPanel Orientation=\"Horizontal\">
        <Button Width=\"75\" Height=\"25\" Style=\"{StaticResource ButtonLeftStyle}\" Content=\"Left\"/>
        <Rectangle Width=\"2\"/>
        <Button Width=\"75\" Height=\"25\" Style=\"{StaticResource ButtonCenterStyle}\" Content=\"Center\"/>
        <Rectangle Width=\"2\"/>
        <Button Width=\"75\" Height=\"25\" Style=\"{StaticResource ButtonRightStyle}\" Content=\"Right\"/>
    </StackPanel>
</Grid>

看起来像： 您可以在此处执行更多操作，但这显示了可以使用的方法。这是一篇很棒的博客文章，其中包含有关此技术的更多信息和示例： Silverlight教程第7部分：使用控件模板来自定义控件的外观     ,        我通过视觉技巧解决了这个问题。首先，我的把戏要求我将按钮放置在代表背景的图像上。这些按钮有些透明，所以背景的颜色也很透明 中间的按钮是简单的矩形画布类。而结束按钮具有圆形末端。 中间的按钮位于末端按钮的前面，并且它们重叠。 这些按钮是透明的，因此通常不起作用，因为您可以看到中间按钮后面的末端按钮边缘。我通过在矩形框的前面放置一个填充有背景图像颜色“ \”之间的矩形（以3D分层深度术语来思考），并在其上方设置了矩形按钮。彩色矩形仅位于结束按钮的前面，而结束按钮位于它们前面的矩形按钮的后面。 这是一种破解，但确实有效。有时间时，我将尝试此处建议的解决方案。     ,        是的，甚至更简单，基于Rick \ S，因为您只想使用样式来解决按钮模板边框的圆角：

<Grid HorizontalAlignment=\"Center\">
  <Grid.Resources>
   <!-- Default Template -->
    <ControlTemplate TargetType=\"Button\">
         <Border x:Name=\"Border\" Background=\"DarkGray\" CornerRadius=\"0\">
              <ContentPresenter HorizontalAlignment=\"Center\" VerticalAlignment=\"Center\"/>
         </Border>
    </ControlTemplate>
    <!-- Custom Styles for edges -->
    <Style x:Key=\"ButtonLeftStyle\" TargetType=\"Button\">
        <Setter Property=\"CornerRadius\" Value=\"10,10\" TargetName=\"Border\"/>
    </Style>
    <Style x:Key=\"ButtonRightStyle\" TargetType=\"Button\">
       <Setter Property=\"CornerRadius\" Value=\"0,0\" TargetName=\"Border\"/>
    </Style>
</Grid.Resources>
<StackPanel Orientation=\"Horizontal\">
    <Button Width=\"75\" Height=\"25\" Style=\"{StaticResource ButtonLeftStyle}\" Content=\"Left\"/>
    <Rectangle Width=\"2\"/>
    <Button Width=\"75\" Height=\"25\" Content=\"Center\"/>
    <Rectangle Width=\"2\"/>
    <Button Width=\"75\" Height=\"25\" Style=\"{StaticResource ButtonRightStyle}\" Content=\"Right\"/>
</StackPanel>