XAML-ControlTemplate für runde Buttons

    • WPF

    Es gibt 3 Antworten in diesem Thema. Der letzte Beitrag () ist von ErfinderDesRades.

      XAML-ControlTemplate für runde Buttons

      Hallo Community,
      Da ich immer lese das "Man sich ncht mit WinForms sondern mit WPF "beschäftige soll habe ich mich mal mit XAML beschäftigt.
      Dieses Tutorial ist ein Anfang,also noch verbesserungswürdig ^^ .
      Hier mal eine kleine Anleitung zum erstellen eines runden Buttons:
      1:Wenn ihr in VB seid,"Neues Projekt",WPF-Anwendung.
      2:Ihr seht ein leeres Fenster,und unterhalb ist noch eines mit gefärbten Texten.Das macht ihr jetzt größ(mache ich zumindest immer).
      Ihr seht folgenden Code:

      XML-Quellcode

      1. <Window x:Class="MainWindow"
      2. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      3. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      4. Title="MainWindow" Height="350" Width="525">
      5. <Grid>
      7. </Grid>
      8. </Window>

      In das "Grid"(markiert durch <Grid></Grid>) gebt ihr nun folgendes ein:

      XML-Quellcode

      1. <Grid>
      2. <Button Name="Button1" ForeGround="White" Template="{StaticResource RunderButtonTemplate}"/>
      3. </Grid>

      Nun habt ihr einen Button im Grid(DesignerSeite),den ihr noch nicht sehen könnt(ja,ich weiß :D ).
      Für einen Aussenkreis nehmt ihr nun vor(!) das Grid diesen Code:

      XML-Quellcode

      1. <Window.Resources>
      2. <ControlTemplate x:Key="RunderButtonTemplate">
      3. <Grid>
      4. <Ellipse x:Name="AussenKreis" Width="120" Height="120">
      5. <Ellipse.Fill>
      6. <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
      7. <GradientStop Offset="0" Color="Black"/>
      8. <GradientStop Offset="1" Color="Red"/>
      9. </LinearGradientBrush>
      10. </Ellipse.Fill>
      11. </Ellipse>
      12. </Grid>
      13. </ControlTemplate>
      14. </Window.Resources>

      Um einen Innenkreis zu zeichnen braucht ihr diesen XAML-Code(Bitte nach dem "</Ellipse>" einfügen):

      XML-Quellcode

      1. <Ellipse Width="100" Height="100">
      2. <Ellipse.Fill>
      3. <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
      4. <GradientStop Offset="0" Color="DarkGreen"/>
      5. <GradientStop Offset="1" Color="DarkCyan"/>
      6. </LinearGradientBrush>
      7. </Ellipse.Fill>
      8. </Ellipse>

      So,jetzt braucht ihr einen sogenannten "ContentPresenter" um die Content(Text)-Eigenschaft zu sehen(bitte nach dem zweiten"</Ellipse>" einfügen):

      XML-Quellcode

      1. <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" Content="{TemplateBinding Button.Content}"/>

      So,nun geht es nach dem </Grid> in den <Window.Resources> weiter:

      XML-Quellcode

      1. <ControlTemplate.Triggers>
      2. <Trigger Property="Button.IsMouseOver" Value="true">
      3. <Setter TargetName="AussenKreis" Property="Fill" Value="Purple"/>
      4. </Trigger>
      5. <Trigger Property="Button.IsPressed" Value="true">
      6. <Setter Property="RenderTransform">
      7. <Setter.Value>
      8. <ScaleTransform ScaleX="0.9" ScaleY=".9"/>
      9. </Setter.Value>
      10. </Setter>
      11. <Setter Property="RenderTransformOrigin" Value=".5,.5"/>
      12. </Trigger>
      13. </ControlTemplate.Triggers>
      14. </ControlTemplate>

      Ein bisschen viel Code auf einmal:
      1.Bei dem <Trigger Property="Button.IsMouseOver" Value="true"> wird die Farbe von dem Button geändert,wenn der Mauszeiger über dem Button ist(Wie evnts,bloß im Designer ;) )
      2.<Trigger Property="Button.IsPressed" Value="true"> :Hier wird der Button,wenn er gedrückt wird,kleiner gemacht(Debug).

      Zum Schluss müsste euer Code nun so aussenhen:

      XML-Quellcode

      1. <Window x:Class="MainWindow"
      2. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      3. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      4. Title="MainWindow" Height="350" Width="525">
      5. <Window.Resources>
      6. <ControlTemplate x:Key="RunderButtonTemplate">
      7. <Grid>
      8. <Ellipse x:Name="AussenKreis" Width="120" Height="120">
      9. <Ellipse.Fill>
      10. <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
      11. <GradientStop Offset="0" Color="Black"/>
      12. <GradientStop Offset="1" Color="Red"/>
      13. </LinearGradientBrush>
      14. </Ellipse.Fill>
      15. </Ellipse>
      16. <Ellipse Width="100" Height="100">
      17. <Ellipse.Fill>
      18. <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
      19. <GradientStop Offset="0" Color="DarkGreen"/>
      20. <GradientStop Offset="1" Color="DarkCyan"/>
      21. </LinearGradientBrush>
      22. </Ellipse.Fill>
      23. </Ellipse>
      24. <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" Content="{TemplateBinding Button.Content}"/>
      25. </Grid>
      26. <ControlTemplate.Triggers>
      27. <Trigger Property="Button.IsMouseOver" Value="true">
      28. <Setter TargetName="AussenKreis" Property="Fill" Value="Purple"/>
      29. </Trigger>
      30. <Trigger Property="Button.IsPressed" Value="true">
      31. <Setter Property="RenderTransform">
      32. <Setter.Value>
      33. <ScaleTransform ScaleX="0.9" ScaleY=".9"/>
      34. </Setter.Value>
      35. </Setter>
      36. <Setter Property="RenderTransformOrigin" Value=".5,.5"/>
      37. </Trigger>
      38. </ControlTemplate.Triggers>
      39. </ControlTemplate>
      40. </Window.Resources>
      41. <Grid>
      42. <Button Name="Button1" Foreground="White" Template="{StaticResource RunderButtonTemplate}">Hallo WPF</Button>
      43. </Grid>
      44. </Window>


      So,ich hoffe es hat etwas gebracht,auf Frage werde ich vielleicht auch noch einen schiefen Button,Bunte,Animinationen und Trigger machen.
      Viel Spaß damit.

      Im Anhang nochmal ein Scrennshot.

      Ricky
      Bilder

      • RunderButton.JPG

        21,03 kB, 523×347, 936 mal angesehen

      Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von „ErfinderDesRades“ ()

      Der Button ist sehr hübsch, aber in dieser Form kaum zu gebrauchen (Wpf-Layout-Funktionalität weg-templated).
      Weil egal wieviel Platz man ihm einräumt, die Kreise sind immer Durchmesser 120.

      Sinniger wäre doch ein Template, was man mehrmals verwenden kann.
      Also dass man am Ende zB ein Grid mit verschieden großen Zellen hat, und da solche Buttons rein, die dann aber den jeweils verfügbaren Platz auch ausnutzen.

      Habich probiert und fund, man braucht am Template eiglich nix(!) zu ändern. Einzig die feste Angabe von Width und Height der Kreise muß man entfernen, und beim kleineren Kreis muß man ein Margin angeben, damit er auch kleiner ist (zeile#16).
      Son Margin bestimmt den Abstand zum Rand des verfügbaren Platzes, und wenn nur eine Zahl angegeben ist (<Ellipse Margin="20">), bezieht die sich auf alle 4 Seiten. Auf diese Weise ist die kleine Ellipse um 20pix kleiner als die "AussenKreis"-Ellipse
      Code complet:

      XML-Quellcode

      1. <Window x:Class="MainWindow"
      2. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      3. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      4. Title="MainWindow" Height="350" Width="525">
      5. <Window.Resources>
      6. <ControlTemplate x:Key="RunderButtonTemplate">
      7. <Grid>
      8. <Ellipse x:Name="AussenKreis" >
      9. <Ellipse.Fill>
      10. <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
      11. <GradientStop Offset="0" Color="Black"/>
      12. <GradientStop Offset="1" Color="Red"/>
      13. </LinearGradientBrush>
      14. </Ellipse.Fill>
      15. </Ellipse>
      16. <Ellipse Margin="20">
      17. <Ellipse.Fill>
      18. <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
      19. <GradientStop Offset="0" Color="DarkGreen"/>
      20. <GradientStop Offset="1" Color="DarkCyan"/>
      21. </LinearGradientBrush>
      22. </Ellipse.Fill>
      23. </Ellipse>
      24. <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" Content="{TemplateBinding Button.Content}"/>
      25. </Grid>
      26. <ControlTemplate.Triggers>
      27. <Trigger Property="Button.IsMouseOver" Value="true">
      28. <Setter TargetName="AussenKreis" Property="Fill" Value="Purple"/>
      29. </Trigger>
      30. <Trigger Property="Button.IsPressed" Value="true">
      31. <Setter Property="RenderTransform">
      32. <Setter.Value>
      33. <ScaleTransform ScaleX="0.9" ScaleY=".9"/>
      34. </Setter.Value>
      35. </Setter>
      36. <Setter Property="RenderTransformOrigin" Value=".5,.5"/>
      37. </Trigger>
      38. </ControlTemplate.Triggers>
      39. </ControlTemplate>
      40. </Window.Resources>
      41. <Grid>
      42. <Grid.RowDefinitions>
      43. <RowDefinition />
      44. <RowDefinition Height="10" />
      45. <RowDefinition />
      46. </Grid.RowDefinitions>
      47. <Grid.ColumnDefinitions>
      48. <ColumnDefinition />
      49. <ColumnDefinition Width="10" />
      50. <ColumnDefinition />
      51. <ColumnDefinition Width="10" />
      52. <ColumnDefinition />
      53. </Grid.ColumnDefinitions>
      54. <GridSplitter Grid.Column="1" Grid.RowSpan="3" HorizontalAlignment="Stretch" />
      55. <GridSplitter Grid.Column="3" Grid.RowSpan="3" HorizontalAlignment="Stretch"/>
      56. <GridSplitter Grid.Row="1" Grid.ColumnSpan="5" HorizontalAlignment="Stretch" />
      57. <Button Foreground="White" Template="{StaticResource RunderButtonTemplate}">Hallo WPF</Button>
      58. <Button Foreground="White" Template="{StaticResource RunderButtonTemplate}" Grid.Column="2">Button2</Button>
      59. <Button Foreground="White" Template="{StaticResource RunderButtonTemplate}" Grid.Column="4">Button3</Button>
      60. <Button Foreground="White" Template="{StaticResource RunderButtonTemplate}" Grid.Row="2">Button4</Button>
      61. <Button Foreground="White" Template="{StaticResource RunderButtonTemplate}" Grid.Row="2" Grid.Column="2">Button5</Button>
      62. <Button Foreground="White" Template="{StaticResource RunderButtonTemplate}" Grid.Row="2" Grid.Column="4">Button6</Button>
      63. </Grid>
      64. </Window>
      Bilder

      • Shots00.Png

        33,8 kB, 515×254, 767 mal angesehen

      Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „ErfinderDesRades“ ()

    Facebook
    Telefonspende