Односторонние округлые кнопки в Silverlight - PullRequest
Новая
       39

Односторонние округлые кнопки в Silverlight

0 голосов
/ 25 июня 2011

Я хочу сделать коллекцию кнопок в silverlight. Они находятся в коллекции, которая идет слева направо, а кнопки расположены так, что они соприкасаются слева и справа. Вот загвоздка: Коллекция имеет закругленные углы, но кнопки между конечными кнопками в коллекции не имеют закругленных концов. Таким образом, для кнопок на левом и правом краях коллекции они должны быть несколько особенными, потому что у них должна быть одна плоская вертикальная сторона и одна закругленная сторона. Можно ли это сделать в Silverlight, не прибегая к созданию специального растрового изображения для кнопок завершения?

У меня есть идея как-то объявить холст с растровым фоном, а затем перекрыть эллипс и прямоугольник 

        <Canvas Height="100" HorizontalAlignment="Left" Margin="189,381,0,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>

Ответы [ 3 ]

2 голосов
/ 25 июня 2011

Вот простой пример эффекта, который вы пытаетесь достичь, который использует пользовательский 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,0,0,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,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,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>

И это выглядит так:

Rounded Buttons

Здесь вы можете сделать гораздо больше, но это показывает подход, который вы можете использовать. Вот отличная статья в блоге с дополнительной информацией и примерами этой техники:

0 голосов
/ 04 июля 2011

Да, еще проще, на основе 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,0,0,10" TargetName="Border"/>
    </Style>
    <Style x:Key="ButtonRightStyle" TargetType="Button">
       <Setter Property="CornerRadius" Value="0,10,10,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>

0 голосов
/ 27 июня 2011

Я решил проблему с помощью визуального трюка.Прежде всего, мой трюк потребовал, чтобы я поместил кнопки на изображение, которое будет представлять фон.Кнопки были несколько прозрачными, поэтому цвет фона проходил через

Кнопки в середине - это простые прямоугольные классы холста.В то время как конечные кнопки имели закругленные концы.

Средние кнопки были перед кнопками на конце, и они перекрывали их.

Кнопки были прозрачными и, как правило, это не будет работать, потому что высможет увидеть края оконечных кнопок за средними кнопками.Я решил это, поместив прямоугольник, заполненный цветом фонового изображения «между» (подумайте в терминах глубины 3D-слоя), конечными кнопками и прямоугольными кнопками перед ним.Только цветные прямоугольники были расположены перед конечными кнопками, которые были позади прямоугольных кнопок перед ними.

Это было что-то вроде хака, но это работало.Когда у меня будет время, я попробую решения, предложенные здесь.

...