Hilfe beim Button Design

  • WPF

Es gibt 7 Antworten in diesem Thema. Der letzte Beitrag () ist von VaporiZed.

    Hallo

    Dafür musst du nur den Style bzw. das Template ändern.
    Schau dir dazu mal Kapitel 2.1.1.3 meiner Tutorialreihe an.

    Der Rest hängt von deiner Fantasie ab.

    Grüße
    Sascha
    If _work = worktype.hard Then Me.Drink(Coffee)
    Seht euch auch meine Tutorialreihe <WPF Lernen/> an oder abonniert meinen YouTube Kanal.

    ## Bitte markiere einen Thread als "Erledigt" wenn deine Frage beantwortet wurde. ##

    Hallo Sascha,

    vielen Dank für den Typ! Ich habe mir mal das alles angesehen und versucht so gut es geht nachzubauen. Leider bekomme ich mein Rectangle nicht in den Vordergrund. Also das Passiert sobald ich die Höhe auf Auto stelle. Ich möchte ja das es Links,Oben und Unten fest am Rahmen bleibt. Ich hoffe es ist verständlich :D

    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. xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    5. xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    6. xmlns:local="clr-namespace:WpfApp2"
    7. mc:Ignorable="d"
    8. Background="SkyBlue"
    9. Title="MainWindow" Height="450" Width="800">
    11. <Grid>
    12. <Grid.Resources>
    13. <Style x:Key="VM-Button" TargetType="{x:Type Button}">
    14. <Setter Property="Margin" Value="6,8"/>
    15. <Setter Property="FontFamily" Value="Mentone Reg"/>
    16. <Setter Property="FontSize" Value="18" />
    18. <Setter Property="Template">
    19. <Setter.Value>
    20. <ControlTemplate TargetType="Button">
    21. <Grid>
    23. <Border BorderThickness="2"
    24. Padding="3"
    25. x:Name="ButtonBorder"
    26. Background="White"
    27. >
    29. <Border.BorderBrush>
    30. <SolidColorBrush x:Name="ButtonBorderBrush" Color="#FFA6A6A6"/>
    31. </Border.BorderBrush>
    32. <ContentPresenter VerticalAlignment="Center"
    33. Margin="20,5" />
    34. </Border>
    36. <Rectangle HorizontalAlignment="Left" Height="Auto" Stroke="#7a7a7a" VerticalAlignment="Top" Width="17" Fill="#a5a5a5" StrokeThickness="2"></Rectangle>
    38. </Grid>
    40. <ControlTemplate.Triggers>
    41. <Trigger Property="IsMouseOver" Value="True">
    42. <Setter TargetName="ButtonBorder" Property="Background" Value="#F6F6F6" />
    43. </Trigger>
    44. </ControlTemplate.Triggers>
    45. </ControlTemplate>
    46. </Setter.Value>
    47. </Setter>
    49. </Style>
    50. </Grid.Resources>
    52. <Button Margin="10,10,253,344" Content="Test" MinWidth="50" MinHeight="30" Padding="2" Style="{StaticResource VM-Button }">
    55. </Button>
    57. </Grid>
    58. </Window>

    Binde doch den Rechteck-Höhenwert an die Höhe des Buttons:

    XML-Quellcode

    1. <Rectangle HorizontalAlignment="Left" Height="{Binding ElementName=ButtonBorder, Path=ActualHeight}" Stroke="#7a7a7a" VerticalAlignment="Top" Width="17" Fill="#a5a5a5" StrokeThickness="2" />

    Dieser Beitrag wurde bereits 5 mal editiert, zuletzt von „VaporiZed“, mal wieder aus Grammatikgründen.

    Aufgrund spontaner Selbsteintrübung sind all meine Glaskugeln beim Hersteller. Lasst mich daher bitte nicht den Spekulatiusbackmodus wechseln.

    Hy

    VaporiZed schrieb:

    Binde doch den Rechteck-Höhenwert an die Höhe des Buttons

    Die Idee ist an sich nicht schlecht, man bekommt dann nur Probleme sobald man das Padding ändert, dann würde das Rectangle oben und unten abgeschnitten werden und da der Border des Rectangle in einer anderen Farbe sein soll würde man das sehen.

    Besser einfach nur VerticalAlignment auf Stretch stellen und gut. Schon passt es sich automatisch an die Größe des Controls an in welchem es sich befindet, in diesem Fall das Grid.

    Ich habe dir auch gleich ein paar Verbesserungen rein gemacht um den Style etwas "flexibler" zu gestallten.

    XML-Quellcode

    1. <Grid Background="LightSlateGray">
    2. <Grid.Resources>
    3. <Style x:Key="VM-Button" TargetType="{x:Type Button}">
    4. <Setter Property="Margin" Value="6,8"/>
    5. <Setter Property="Height" Value="30"/>
    6. <Setter Property="FontFamily" Value="Mentone Reg"/>
    7. <Setter Property="FontSize" Value="18" />
    8. <Setter Property="BorderThickness" Value="2"/>
    9. <Setter Property="BorderBrush" Value="#FFA6A6A6"/>
    10. <Setter Property="Background" Value="White"/>
    11. <Setter Property="Template">
    12. <Setter.Value>
    13. <ControlTemplate TargetType="Button">
    14. <Grid>
    15. <Grid.ColumnDefinitions>
    16. <ColumnDefinition Width="auto"/>
    17. <ColumnDefinition Width="*"/>
    18. </Grid.ColumnDefinitions>
    19. <Border
    20. Grid.ColumnSpan="2"
    21. BorderThickness="{TemplateBinding BorderThickness}"
    22. Padding="3"
    23. x:Name="ButtonBorder"
    24. Background="{TemplateBinding Background}"
    25. BorderBrush="{TemplateBinding BorderBrush}">
    26. </Border>
    28. <Rectangle HorizontalAlignment="Left" Height="Auto" Stroke="#7a7a7a" VerticalAlignment="Stretch" Width="7" Fill="#a5a5a5" StrokeThickness="2"></Rectangle>
    29. <ContentPresenter VerticalAlignment="Center" Margin="{TemplateBinding Padding}" Grid.Column="1" />
    30. </Grid>
    32. <ControlTemplate.Triggers>
    33. <Trigger Property="IsMouseOver" Value="True">
    34. <Setter TargetName="ButtonBorder" Property="Background" Value="#F6F6F6" />
    35. </Trigger>
    36. <Trigger Property="IsEnabled" Value="False">
    37. <Setter TargetName="ButtonBorder" Property="Background" Value="LightGray" />
    38. <Setter Property="Foreground" Value="Gray"/>
    39. </Trigger>
    40. </ControlTemplate.Triggers>
    41. </ControlTemplate>
    42. </Setter.Value>
    43. </Setter>
    44. </Style>
    45. </Grid.Resources>
    46. <StackPanel>
    47. <Button Style="{StaticResource VM-Button}" Content="Hallo Welt" IsEnabled="False"/>
    48. <Button Style="{StaticResource VM-Button}" Content="Hallo Welt"/>
    49. <Button Style="{StaticResource VM-Button}" Content="Hallo Welt" Background="Aquamarine" Foreground="Red"/>
    50. <Button Style="{StaticResource VM-Button}" Content="Hallo Welt" Padding="10,0"/>
    51. <Button Style="{StaticResource VM-Button}" Content="Hallo Welt" Padding="10,0" BorderBrush="Red"/>
    52. <Button Style="{StaticResource VM-Button}" Content="Hallo Welt" Padding="10,0" BorderBrush="DarkGreen" BorderThickness="5"/>
    53. </StackPanel>
    54. </Grid>
    55. ​




    Grüße
    Sascha
    If _work = worktype.hard Then Me.Drink(Coffee)
    Seht euch auch meine Tutorialreihe <WPF Lernen/> an oder abonniert meinen YouTube Kanal.

    ## Bitte markiere einen Thread als "Erledigt" wenn deine Frage beantwortet wurde. ##

    Ich glaub, dass das Design in die falsche (Balken-)Richtung geht. Laut Post#1 ja eher so rum:

    Aber das sind ja Kleinigkeiten …

    ##########

    Achso: Was ist, wenn man statt einem Grid ein DockPanel verwendet? Dann verschiebt der Farbbalken den Button. Ist das eine Option?
    Spoiler anzeigen

    XML-Quellcode

    1. <Grid>
    2. <Grid.Resources>
    3. <Style x:Key="VM-Button" TargetType="{x:Type Button}">
    4. <Setter Property="Margin" Value="6,8"/>
    5. <Setter Property="FontFamily" Value="Mentone Reg"/>
    6. <Setter Property="FontSize" Value="18" />
    7. <Setter Property="Template">
    8. <Setter.Value>
    9. <ControlTemplate TargetType="Button">
    10. <DockPanel>
    11. <Rectangle HorizontalAlignment="Left" Height="{Binding ElementName=ButtonBorder, Path=ActualHeight}" Stroke="#7a7a7a" VerticalAlignment="Top" Width="20" Fill="#a5a5a5" StrokeThickness="2" />
    12. <Border BorderThickness="2" Padding="3" x:Name="ButtonBorder" Background="White">
    13. <Border.BorderBrush>
    14. <SolidColorBrush x:Name="ButtonBorderBrush" Color="#FFA6A6A6"/>
    15. </Border.BorderBrush>
    16. <ContentPresenter VerticalAlignment="Center" Margin="20,5" />
    17. </Border>
    18. </DockPanel>
    20. <ControlTemplate.Triggers>
    21. <Trigger Property="IsMouseOver" Value="True">
    22. <Setter TargetName="ButtonBorder" Property="Background" Value="#F6F6F6" />
    23. </Trigger>
    24. </ControlTemplate.Triggers>
    25. </ControlTemplate>
    26. </Setter.Value>
    27. </Setter>
    28. </Style>
    29. </Grid.Resources>
    30. <Button Content="Test" MinWidth="50" MinHeight="30" Style="{StaticResource VM-Button}" Height="60"/>
    31. </Grid>

    Dieser Beitrag wurde bereits 5 mal editiert, zuletzt von „VaporiZed“, mal wieder aus Grammatikgründen.

    Aufgrund spontaner Selbsteintrübung sind all meine Glaskugeln beim Hersteller. Lasst mich daher bitte nicht den Spekulatiusbackmodus wechseln.

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

    VaporiZed schrieb:

    Laut Post#1 ja eher so rum

    Verstehe leider nicht was du meinst. Mein Button sieht doch genau so aus wie im Post 1 gezeigt oder nicht?
    Stehe ich am schlauch?

    Kannst du bitte kurz erklären was du meinst?

    Ja, viele Wege führen nach Rom. Es gibt in der WPF ja sooo viele geniale Controls, da kann man sich auch schnell mal im Wald verlieren ;)

    Grüße
    Sascha
    If _work = worktype.hard Then Me.Drink(Coffee)
    Seht euch auch meine Tutorialreihe <WPF Lernen/> an oder abonniert meinen YouTube Kanal.

    ## Bitte markiere einen Thread als "Erledigt" wenn deine Frage beantwortet wurde. ##

    Autsch. Klar. Hab mir nur die Vorschau angesehen und den kleinen grauen Balken übersehen.
    Dieser Beitrag wurde bereits 5 mal editiert, zuletzt von „VaporiZed“, mal wieder aus Grammatikgründen.

    Aufgrund spontaner Selbsteintrübung sind all meine Glaskugeln beim Hersteller. Lasst mich daher bitte nicht den Spekulatiusbackmodus wechseln.