WPF - Buttons immer gleich groß

  • WPF

Es gibt 15 Antworten in diesem Thema. Der letzte Beitrag () ist von Nofear23m.

    WPF - Buttons immer gleich groß

    Hallo,

    ich habe einige Buttons in einem GridLayout positioniert. Auf den Buttons stehen die Zahlen 1 - 15.
    Wenn ich die Buttons per Programmcode in dem GridLayout verschiebe, verkleinern sie sich manchmal. (siehe Video)
    Wie bekomme ich es hin, dass die Buttons immer die Größe beibehalten, die sie am Anfang haben. (Ich kann sie nicht mit festem Wert zuweisen, da man die Anwendung zur Laufzeit skalieren kann)
    Vielen Dank für VorschlägeLG Florian
    Bilder
    • p1 .jpg

      681,68 kB, 2.510×1.895, 141 mal angesehen
    • v1.gif

      355,12 kB, 600×430, 190 mal angesehen
    ----

    WebApps mit C#: Blazor
    Hallo Florian

    Sei doch bitte so gut und Poste den XAML als Text (XML CodeTag), dann müssen wir nicht alles abtippen um dir ein Beispiel Posten zu können. Und besser lesbar als auf nem Bild ist es auch.

    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

    Stimmt, das ist ja viel einfacher.

    XML-Quellcode

    1. ​<Window x:Class="Schiebepuzzle.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:Schiebepuzzle"
    7. mc:Ignorable="d"
    8. Title="MainWindow" Height="600" Width="800">
    9. <Grid >
    10. <Grid.RowDefinitions>
    11. <RowDefinition Height="Auto"></RowDefinition>
    12. <RowDefinition Height="*"></RowDefinition>
    13. <RowDefinition Height="Auto"></RowDefinition>
    14. </Grid.RowDefinitions>
    15. <Label FontSize="30" Margin="20" HorizontalAlignment="Center">15 Schiebepuzzel</Label>
    16. <Viewbox Margin="40" Grid.Row="1" >
    17. <Border BorderBrush="Black" BorderThickness="5" >
    18. <Grid x:Name="grl_field" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
    19. <Grid.ColumnDefinitions>
    20. <ColumnDefinition Width="*"></ColumnDefinition>
    21. <ColumnDefinition Width="*"></ColumnDefinition>
    22. <ColumnDefinition Width="*"></ColumnDefinition>
    23. <ColumnDefinition Width="*"></ColumnDefinition>
    24. </Grid.ColumnDefinitions>
    25. <Grid.RowDefinitions>
    26. <RowDefinition Height="*"></RowDefinition>
    27. <RowDefinition Height="*"></RowDefinition>
    28. <RowDefinition Height="*"></RowDefinition>
    29. <RowDefinition Height="*"></RowDefinition>
    30. </Grid.RowDefinitions>
    31. <Button x:Name="btn_01" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Padding="20,10" FontSize="36" FontWeight="Bold" Grid.Column="0" Grid.Row="0" Click="btn_click">1</Button>
    32. <Button x:Name="btn_02" Padding="20,10" FontSize="36" FontWeight="Bold" Grid.Column="1" Grid.Row="0" Click="btn_click">2</Button>
    33. <Button x:Name="btn_03" Padding="20,10" FontSize="36" FontWeight="Bold" Grid.Column="2" Grid.Row="0" Click="btn_click">3</Button>
    34. <Button x:Name="btn_04" Padding="20,10" FontSize="36" FontWeight="Bold" Grid.Column="3" Grid.Row="0" Click="btn_click">4</Button>
    35. <Button x:Name="btn_05" Padding="20,10" FontSize="36" FontWeight="Bold" Grid.Column="0" Grid.Row="1" Click="btn_click">5</Button>
    36. <Button x:Name="btn_06" Padding="20,10" FontSize="36" FontWeight="Bold" Grid.Column="1" Grid.Row="1" Click="btn_click" Grid.ColumnSpan="1">6</Button>
    37. <Button x:Name="btn_07" Padding="20,10" FontSize="36" FontWeight="Bold" Grid.Column="2" Grid.Row="1" Click="btn_click">7</Button>
    38. <Button x:Name="btn_08" Padding="20,10" FontSize="36" FontWeight="Bold" Grid.Column="3" Grid.Row="1" Click="btn_click">8</Button>
    39. <Button x:Name="btn_09" Padding="20,10" FontSize="36" FontWeight="Bold" Grid.Column="0" Grid.Row="2" Click="btn_click">9</Button>
    40. <Button x:Name="btn_10" Padding="20,10" FontSize="36" FontWeight="Bold" Grid.Column="1" Grid.Row="2" Click="btn_click">10</Button>
    41. <Button x:Name="btn_11" Padding="20,10" FontSize="36" FontWeight="Bold" Grid.Column="2" Grid.Row="2" Click="btn_click">11</Button>
    42. <Button x:Name="btn_12" Padding="20,10" FontSize="36" FontWeight="Bold" Grid.Column="3" Grid.Row="2" Click="btn_click">12</Button>
    43. <Button x:Name="btn_13" Padding="20,10" FontSize="36" FontWeight="Bold" Grid.Column="0" Grid.Row="3" Click="btn_click">13</Button>
    44. <Button x:Name="btn_14" Padding="20,10" FontSize="36" FontWeight="Bold" Grid.Column="1" Grid.Row="3" Click="btn_click">14</Button>
    45. <Button x:Name="btn_15" Padding="20,10" FontSize="36" FontWeight="Bold" Grid.Column="2" Grid.Row="3" Click="btn_click">15</Button>
    46. <Button x:Name="btn_16" Padding="20,10" FontSize="36" FontWeight="Bold" Grid.Column="3" Grid.Row="3" Click="btn_click" Background="White" IsEnabled="False"></Button>
    47. </Grid>
    48. </Border>
    49. </Viewbox>
    50. <StackPanel Margin="10" Grid.Row="2" Orientation="Horizontal" VerticalAlignment="Bottom">
    51. <Button>Platzhalter</Button>
    52. <Button>Platzhalter</Button>
    53. </StackPanel>
    54. </Grid>
    55. </Window>
    ----

    WebApps mit C#: Blazor

    ErfinderDesRades schrieb:

    kann man glaub auch den Grund ein Stückweit erkennen

    Ich weis nicht ob das jetzt dem TE was bringt. ICh denke soweit kahm er selbst oder?

    Ich würde statt einem Grid ein UniformGrid nehmen.
    Aber Achtung: Dieses verhält sich anders. Du gibst an wieviele Spalten und Zeilen du haben willst und jedes Element welches hinzugefügt wird kommt immer in das "nächste Feld".
    Alternativ geht es auch mit dem normalen Grid indem du die SharedSizeGroup festlegst und am Grid das Property IsSharedSizeScope setzt.

    XML-Quellcode

    1. <Grid x:Name="grl_field" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" IsSharedSizeScope="True">
    2. <Grid.ColumnDefinitions>
    3. <ColumnDefinition Width="Auto" SharedSizeGroup="A"></ColumnDefinition>
    4. <ColumnDefinition Width="Auto" SharedSizeGroup="A"></ColumnDefinition>
    5. <ColumnDefinition Width="Auto" SharedSizeGroup="A"></ColumnDefinition>
    6. <ColumnDefinition Width="Auto" SharedSizeGroup="A"></ColumnDefinition>
    7. </Grid.ColumnDefinitions>
    8. <Grid.RowDefinitions>
    9. <RowDefinition Height="Auto" SharedSizeGroup="B"></RowDefinition>
    10. <RowDefinition Height="Auto" SharedSizeGroup="B"></RowDefinition>
    11. <RowDefinition Height="Auto" SharedSizeGroup="B"></RowDefinition>
    12. <RowDefinition Height="Auto" SharedSizeGroup="B"></RowDefinition>
    13. </Grid.RowDefinitions>
    14. <Button x:Name="btn_01" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Padding="20,10" FontSize="36" FontWeight="Bold" Grid.Column="0" Grid.Row="0" Click="btn_click">1</Button>
    15. <Button x:Name="btn_02" Padding="20,10" FontSize="36" FontWeight="Bold" Grid.Column="1" Grid.Row="0" Click="btn_click">2</Button>
    16. <Button x:Name="btn_03" Padding="20,10" FontSize="36" FontWeight="Bold" Grid.Column="2" Grid.Row="0" Click="btn_click">3</Button>
    17. <Button x:Name="btn_04" Padding="20,10" FontSize="36" FontWeight="Bold" Grid.Column="3" Grid.Row="0" Click="btn_click">4</Button>
    18. <Button x:Name="btn_05" Padding="20,10" FontSize="36" FontWeight="Bold" Grid.Column="0" Grid.Row="1" Click="btn_click">5</Button>
    19. <Button x:Name="btn_06" Padding="20,10" FontSize="36" FontWeight="Bold" Grid.Column="1" Grid.Row="1" Click="btn_click" Grid.ColumnSpan="1">6</Button>
    20. <Button x:Name="btn_07" Padding="20,10" FontSize="36" FontWeight="Bold" Grid.Column="2" Grid.Row="1" Click="btn_click">7</Button>
    21. <Button x:Name="btn_08" Padding="20,10" FontSize="36" FontWeight="Bold" Grid.Column="3" Grid.Row="1" Click="btn_click">8</Button>
    22. <Button x:Name="btn_09" Padding="20,10" FontSize="36" FontWeight="Bold" Grid.Column="0" Grid.Row="2" Click="btn_click">9</Button>
    23. <Button x:Name="btn_10" Padding="20,10" FontSize="36" FontWeight="Bold" Grid.Column="1" Grid.Row="2" Click="btn_click">10</Button>
    24. <Button x:Name="btn_11" Padding="20,10" FontSize="36" FontWeight="Bold" Grid.Column="2" Grid.Row="2" Click="btn_click">11</Button>
    25. <Button x:Name="btn_12" Padding="20,10" FontSize="36" FontWeight="Bold" Grid.Column="3" Grid.Row="2" Click="btn_click">12</Button>
    26. <Button x:Name="btn_13" Padding="20,10" FontSize="36" FontWeight="Bold" Grid.Column="0" Grid.Row="3" Click="btn_click">13</Button>
    27. <Button x:Name="btn_14" Padding="20,10" FontSize="36" FontWeight="Bold" Grid.Column="1" Grid.Row="3" Click="btn_click">14</Button>
    28. <Button x:Name="btn_15" Padding="20,10" FontSize="36" FontWeight="Bold" Grid.Column="2" Grid.Row="3" Click="btn_click">15</Button>
    29. <Button x:Name="btn_16" Padding="20,10" FontSize="36" FontWeight="Bold" Grid.Column="3" Grid.Row="3" Click="btn_click" Background="White" IsEnabled="False"></Button>
    30. </Grid>


    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. ##

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

    Hallo

    Irgendwie fand ich die Idee ja cool. Nun hat es mich ja interessiert ob man das ganze relativ einfach rein mittels Binding und DataTemplates realisieren könnte ohne Controls direkt anzusprechen und ohne jetzt zu komplizierten code zu generieren.

    Und mit dem UniformGrid geht das tatsächlich sehr gut.

    Spoileralarm für den TE. Wenn du selbst probieren willst dann lade das Projekt nicht.
    Anbei das Projekt diesmal ausnahmsweise mit Bin Ordner damit man es auch einfach nur mal probieren kann.



    Grüße
    Sascha
    Dateien
    • WPF_Test.zip

      (605,76 kB, 129 mal heruntergeladen, zuletzt: )
    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. ##

    Alternativ kannst du auch 25* als Width/Height eintragen, was bei 4 Columns/Rows 25% width/height entsprechen würde.
    Bei 5 Columns/Rows wäre der Wert 20*, also 20% pro "Zelle".
    @slice waäre natürlich eine Alternative.
    Der Nachteil ist nur wenn man nun ein Spielfeld mit 6x6 Feldern haben möchte muss man wieder alles umschreiben. Mit der SharedSizeGroup geht das automatisch und ich kann per Copy&Paste einfach neues Zeilen und Spalten hinzufügen. Idel ist trotztdem ein UniformGrid da hier Rows und Columns bindbar ist da dies DependencyProperties sind.

    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. ##

    Das stimmt und deine Lösung ist in dem Fall definitiv die bessere, ich wollte nur die Möglichkeit von "Prozentwerten" erwähnen.
    Da frage ich mich, ob NoFear schon ein tut-Kapitel gemacht hat zu den verschiedenen Layoutmöglichkeiten: DockPanel, Canvas, Grid, GridSplitter, UniformGrid, StackPanel, ScrollViewer, Viewport...
    Ich verfolge sein Tut nicht systematisch, hab aber grad die Idee, dass dieses Thema eine etwas fettere Baustelle werden könnte.
    Weil gehören ja auch so Feinheiten mit rein: Margin, Padding, SharedSizeGroup, absolute/relative grössenAngaben, sizemodes etc.
    Ist auch ein dankbares Thema für ein Video - oder man braucht echt viele Bildle.

    ErfinderDesRades schrieb:

    Da frage ich mich, ob NoFear schon ein tut-Kapitel gemacht hat zu den verschiedenen Layoutmöglichkeiten

    Naja, ich habe in den ersten Kapiteln die wichtigsten Controls durchgenommen. Aber so ins Detail bin ich nicht gegangen. Ich habe einfach die Angst das es echt "zäh" wird wenn ich zu sehr ins Detail gehe.
    Ich gehe auch davon aus das jeder Googeln kann. Aber das UniformGrid habe ich natürlich angesprochen.

    Und wenn man mit Google nicht weiterkommt gibt es ja dieses Forum. Wir brauchen ja auch was zu tun oder? :thumbsup:

    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. ##

    naja, um zu googlen muss man erst wissen, wasses alles gibt.
    Und zäh muss mans ja nicht machen - man braucht ja jeweils im Video nur kurz anreissen: Einstellung zeigen, Auswirkung zeigen, weiter. Muss man nichtmal Testlauf machen, Layout ist ja direkt inne Xaml-Vorschau sichtbar.
    Und viel erklären muss man imo nicht - bzw. dann können die Leuts nach Erklärungen googeln.
    Man muss allerdings sich gut was ausdenken, was alles dazugehört, wie mans präsentiert, vmtl. einen Haufen Windows vorbereiten, denn man dann durchzappt.
    Ich gebe dir da schon völlig recht, ein gutes Thema für ein "Spezial" wäre es auf jeden Fall. Vorallem sind die Panels mitunter wie ich finde das wichtigste.
    Du kannst dir noch so viel mühe mit den Controls geben, hast du für deine Ansicht das falsche Panel gewählt machst du dir das Leben schwerer als es sein muss.

    Ich finde nur im Moment nicht wirklich die Zeit dafür da ich ein größeres Projekt für meine Firma mache und privat auch eines laufen habe und hier voll eingespannt bin.
    Willst du vieleicht? Du machst ja super Tuts und deine Stimme ist auch toll. Mach doch ein Video. Gerne verlinke ich das dann auch in den Kapiteln.

    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. ##