none
Помогите с разметкой в WPF RRS feed

  • Вопрос

  • Не могу найти способ, как выровнять элементы в кнопке, чтобы выглядило как на скриншоте, картинки слева, а текст справа.

    делаю кнопку:

                <Button Style="{StaticResource btnStyle}" DockPanel.Dock="Top">
                    <DockPanel LastChildFill="True">
                        <Image DockPanel.Dock="Left" Height="16" Margin="4" Source="/Data/Images/Note.ico" />
                        <TextBlock DockPanel.Dock="Right" Text="Bemerkung" VerticalAlignment="Center" />
                        <Label />
                    </DockPanel>
                </Button>

    но получается так


    картинка и текс находятся по центру и не хотят смещаться...

    я думал, если вставлю <Label /> третьим элементом, он займет все свободное пространсто, но и это не помогло.


    • Изменено SergejS 29 августа 2017 г. 11:52
    29 августа 2017 г. 11:41

Ответы

  • Пробуйте последний вариант. Должно сработать.

    <Button Style="{StaticResource btnStyle}" DockPanel.Dock="Top" HorizontalContentAlignment="Stretch">
                <Grid >
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Image Height="16" Margin="4" Source="/Data/Images/Note.ico" />
                    <TextBlock Grid.Column="1" Text="Bemerkung" VerticalAlignment="Center" HorizontalAlignment="Right"/>
                </Grid>
            </Button>

    VB.Net - WPF, UWP

    • Помечено в качестве ответа SergejS 29 августа 2017 г. 15:32
    29 августа 2017 г. 14:07
    Отвечающий

Все ответы

  •         <Button Style="{StaticResource btnStyle}" DockPanel.Dock="Top">
                <Grid >
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Image Height="16" Margin="4" Source="/Data/Images/Note.ico" />
                    <TextBlock Grid.Column="1" Text="Bemerkung" VerticalAlignment="Center" HorizontalAlignment="Right"/>
                </Grid>
            </Button>


    VB.Net - WPF, UWP

    • Изменено LXGDARKEditor 29 августа 2017 г. 12:29
    29 августа 2017 г. 12:28
    Отвечающий
  • даже если написать вот так:
    <TextBlock Grid.Column="1" Text="Version" VerticalAlignment="Center" HorizontalAlignment="Right" />
    Текст на кнопке, как и картинка остаются в центре
    29 августа 2017 г. 13:00
  • Вы целиком мой XAML копировали или только этот участок?

    VB.Net - WPF, UWP

    29 августа 2017 г. 13:17
    Отвечающий
  • Вот код который я использовал:
    29 августа 2017 г. 13:24
  • Тогда попробуйте так:

    <Button Style="{StaticResource btnStyle}" DockPanel.Dock="Top">
                <Grid HorizontalAlignment="Stretch">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Image Height="16" Margin="4" Source="/Data/Images/Note.ico" />
                    <TextBlock Grid.Column="1" Text="Bemerkung" VerticalAlignment="Center" HorizontalAlignment="Right"/>
                </Grid>
            </Button>

    У меня просто нет возможности проверить XAML. поэтому некоторые мелочи могу упускать.


    VB.Net - WPF, UWP

    29 августа 2017 г. 13:54
    Отвечающий
  • Ничего не меняется! Если смотреть в дизайнере среды VS 2017, то видно, что грид не растягивается на всю кнопку 

    29 августа 2017 г. 14:04
  • Пробуйте последний вариант. Должно сработать.

    <Button Style="{StaticResource btnStyle}" DockPanel.Dock="Top" HorizontalContentAlignment="Stretch">
                <Grid >
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Image Height="16" Margin="4" Source="/Data/Images/Note.ico" />
                    <TextBlock Grid.Column="1" Text="Bemerkung" VerticalAlignment="Center" HorizontalAlignment="Right"/>
                </Grid>
            </Button>

    VB.Net - WPF, UWP

    • Помечено в качестве ответа SergejS 29 августа 2017 г. 15:32
    29 августа 2017 г. 14:07
    Отвечающий
  • Спасибо, помогло!
    29 августа 2017 г. 15:32
  • тогда работает и разметка попроще:
    <Button Style="{StaticResource btnStyle}" DockPanel.Dock="Top" Margin="5,24,7,2" HorizontalContentAlignment="Stretch">
        <DockPanel LastChildFill="True">
            <Image DockPanel.Dock="Left" Height="16" Margin="6,2" Source="/Data/Images/Info.ico" />
            <TextBlock DockPanel.Dock="Right" Text="Version" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="6,2" />
        </DockPanel>
    </Button>

    30 августа 2017 г. 6:30
  • У меня просто с DockPanel как то не сложилось, хотя с вами полностью согласен - в данном случае Grid это усложнение.

    VB.Net - WPF, UWP

    30 августа 2017 г. 6:47
    Отвечающий