Button Image mit Content

  • WPF
  • .NET 5–6

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

    Button Image mit Content

    Kurze Frage ,

    wie kann ich bei Xaml einen Button machen mit Content Text und dahinter ein Image :

    XML-Quellcode

    1. ​
    2. <Button x:Name="btn_win_login" Style="{StaticResource btn_window}" Grid.Row="1" Grid.Column="1"
    3. Content="test">
    4. <Image Source="/Image/anmelden.png" />
    6. </Button>


    so funtioniert das nicht ...

    okay danke das klappt aber ne andere frage wie kann ich den text nach links tun und das bild nach rechts ?

    XML-Quellcode

    1. ​ <Button x:Name="btn_win_login" Grid.Row="1" Grid.Column="1" Width="100" Height="30">
    2. <Grid>
    3. <TextBlock Text="test" VerticalAlignment="Center" HorizontalAlignment="Left"/>
    4. <Image Source="/Image/anmelden.png" VerticalAlignment="Center" HorizontalAlignment="Right"/>
    6. </Grid>
    7. </Button>

    weil so klappt das nicht hab es auch mit Colums versucht ....

    z.B. so

    XML-Quellcode

    1. <Button x:Name="btn_win_login" Grid.Row="1" Grid.Column="1" Width="100" Height="30">
    2. <Grid>
    3. <Grid.ColumnDefinitions>
    4. <ColumnDefinition/>
    5. <ColumnDefinition/>
    6. </Grid.ColumnDefinitions>
    7. <TextBlock Text="test" VerticalAlignment="Center"/>
    8. <Image Grid.Column="1" Source="/Image/anmelden.png" />
    10. </Grid>
    11. </Button>

    oder alternativ auch mit einem StackPanel

    XML-Quellcode

    1. <Button x:Name="btn_win_login" Grid.Row="1" Grid.Column="1" Width="100" Height="30">
    2. <StackPanel Orientation="Horizontal">
    3. <TextBlock Text="test" VerticalAlignment="Center"/>
    4. <Image Source="/Image/anmelden.png" />
    5. </StackPanel>
    6. </Button>

    Dumm ist der, der dumm ist. Nicht andersrum!

    okay das klappt die einzige frage ist für mich grad nur wenn ich die widht anpasse dann wird der button größer von der breite ist ja klat aber der Content da drine nicht viel mehr.
    also generell ist der Content im button nicht komplett auf das widht skaliert warum oder kann man das irgendwie ändern ?

    Das müsstest du schon genauer werden. Meinst du Zoomen? Das ginge z.b. mit einer ViewBox.

    Generell empfehle ich dir dich mal mit den ganzen Panels und den Controls an sich vertraut zu machen.
    Dann mit den Styles und Templates. In der WPF hat man nun mal viel mehr Möglichkeiten, aber wenn man gar nicht erst weis was es überhaupt so gibt weis wann auch nicht wie man an sein Ziel kommen könnte.

    Schau mal in meine Signatur, das ist einiges drinnen.
    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. ##

    Also eigentlich will ich nur jetzt in meinen Beispiel das der Content im Button ist einmal der Text= Anmelden + das Icon halt zum Button passt aber der Button von der width ist halt deutlich größer und ich frage mich warum ?

    XML-Quellcode

    1. ​
    2. <Style x:Key="btn_window_anmelden" TargetType="{x:Type Button}">
    3. <Setter Property="VerticalAlignment" Value="Center"/>
    4. <Setter Property="HorizontalAlignment" Value="Center"/>
    5. <Setter Property="VerticalContentAlignment" Value="Center"/>
    6. <Setter Property="HorizontalContentAlignment" Value="Center"/>
    7. <Setter Property="Background" Value="Transparent"/>
    8. <Setter Property="Foreground" Value="Wheat"/>
    9. <Setter Property="BorderBrush" Value="Transparent"/>
    10. <Setter Property="Height" Value="30"/>
    11. <Setter Property="Width" Value="200"/>
    12. <Setter Property="FontSize" Value="18"/>
    13. </Style>
    14. <Button x:Name="btn_win_login" Grid.Row="1" Grid.Column="1" Style="{StaticResource btn_window_anmelden}">
    15. <Grid>
    16. <Grid.ColumnDefinitions>
    17. <ColumnDefinition/>
    18. <ColumnDefinition/>
    19. </Grid.ColumnDefinitions>
    20. <TextBlock Text="Anmelden" VerticalAlignment="Center" />
    21. <Image Grid.Column="1" Source="/Image/anmelden.png" />
    22. </Grid>
    23. </Button>

    Sorry, ich habe den Satz nun drei mal gelesen, verstehe aber nicht ganz was am ende rauskommen soll. Skizze?
    Mach doch z.b. Drei kleine Skizzen mit unterschiedlich großen Buttons wo man erkennen kann wie sich das Icon im Bezug zur Buttongröße verhalten soll.

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

Facebook
Telefonspende