in

Botones redondos

Last post 03-07-2007 15:15 by tonirecio. 1 replies.
Page 1 of 1 (2 items)
Sort Posts: Previous Next
  • 02-16-2007 18:17

    • jmservera
    • Top 10 Contributor
    • Joined on 01-25-2007
    • Palma de Mallorca
    • Posts 61
    • Points 1,056

    Botones redondos

    Ahí van los botones redondos en xaml. Es una versión hecha en un ratito sin refinar, pero para que veais que se puede hacer cualquier cosa en poco tiempo, he redefinido el estilo del tipo Button y se lo aplico a un botón en el formulario.

    Para verlo, copiad el xml y lo pegais en un archivo con la extensión .xaml

    <Page

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="Page1"

        >

      <Page.Resources>

        <Style x:Key="RoundButton" BasedOn="{x:Null}" TargetType="{x:Type Button}">

          <Setter Property="Template">

            <Setter.Value>

              <ControlTemplate TargetType="{x:Type Button}">

                <Grid>

                  <Ellipse Stroke="#FF000000" x:Name="backGroundEllipse">

                    <Ellipse.Fill>

                      <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">

                        <GradientStop Color="#FFFFFFFF" Offset="0"/>

                        <GradientStop Color="#FFF0F0EA" Offset="0.909"/>

                      </LinearGradientBrush>

                    </Ellipse.Fill>

                  </Ellipse>

                  <Ellipse Opacity="0.305" RenderTransformOrigin="0.5,0.5" Fill="{x:Null}" Stroke="#FF0002FF" StrokeThickness="2" x:Name="focusEllipse">

                    <Ellipse.RenderTransform>

                      <TransformGroup>

                        <ScaleTransform ScaleX="1" ScaleY="1"/>

                        <SkewTransform AngleX="0" AngleY="0"/>

                        <RotateTransform Angle="0"/>

                        <TranslateTransform X="0" Y="0"/>

                      </TransformGroup>

                    </Ellipse.RenderTransform>

                  </Ellipse>

                  <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True"/>

                </Grid>

                <ControlTemplate.Triggers>

                  <Trigger Property="IsFocused" Value="True"/>

                  <Trigger Property="IsDefaulted" Value="True"/>

                  <Trigger Property="IsMouseOver" Value="True">

                    <Setter Property="BorderThickness" Value="1,1,1,1"/>

                    <Setter Property="Stroke" TargetName="backGroundEllipse" Value="#FF000000"/>

                    <Setter Property="Stroke" TargetName="focusEllipse" Value="#FFFFB600"/>

                    <Setter Property="RenderTransform" TargetName="focusEllipse">

                      <Setter.Value>

                        <TransformGroup>

                          <ScaleTransform ScaleX="0.98" ScaleY="0.98"/>

                          <SkewTransform AngleX="0" AngleY="0"/>

                          <RotateTransform Angle="0"/>

                          <TranslateTransform X="0" Y="0"/>

                        </TransformGroup>

                      </Setter.Value>

                    </Setter>

                    <Setter Property="Opacity" TargetName="focusEllipse" Value="0.57"/>

                    <Setter Property="StrokeThickness" TargetName="focusEllipse" Value="2"/>

                  </Trigger>

                  <Trigger Property="IsPressed" Value="True">

                    <Setter Property="Fill" TargetName="backGroundEllipse" Value="#FF9B9B9B"/>

                  </Trigger>

                  <Trigger Property="IsEnabled" Value="False"/>

                  <MultiTrigger>

                    <MultiTrigger.Conditions>

                      <Condition Property="IsKeyboardFocused" Value="True"/>

                      <Condition Property="IsMouseOver" Value="False"/>

                    </MultiTrigger.Conditions>

                    <Setter Property="Stroke" TargetName="backGroundEllipse" Value="#FF000000"/>

                    <Setter Property="StrokeThickness" TargetName="backGroundEllipse" Value="1"/>

                    <Setter Property="Stroke" TargetName="focusEllipse" Value="#FF000175"/>

                    <Setter Property="StrokeThickness" TargetName="focusEllipse" Value="3"/>

                  </MultiTrigger>

                </ControlTemplate.Triggers>

              </ControlTemplate>

            </Setter.Value>

          </Setter>

        </Style>

      </Page.Resources>

        <Grid>

          <Button Style="{DynamicResource RoundButton}" Height="69" HorizontalAlignment="Left" Margin="8,8,0,0" Name="button1" VerticalAlignment="Top" Width="75">Button</Button>

      </Grid>

    </Page>

     

    Juan M. Servera
    Filed under: ,
    • Post Points: 22
  • 03-07-2007 15:15 In reply to

    • tonirecio
    • Top 25 Contributor
    • Joined on 03-07-2007
    • Posts 4
    • Points 54

    Re: Botones redondos

    Post "redondo"!

    Felicidades por el trabajo!

     ;-)

    • Post Points: 5
Page 1 of 1 (2 items)
Baleares on .NET®
Powered by Community Server (Commercial Edition), by Telligent Systems