Разделяем кнопку пополам

ProgramBox

Разделяем кнопку пополам

Post author:admin
Запись опубликована:23 августа, 2022
Post category:Вопросы по программированию

#c# #wpf #xaml #stackpanel

#c# #wpf #xaml #панель стекирования

Вопрос:

Я пытаюсь разделить кнопку пополам, чтобы я мог отображать текстовые данные в каждой половине, размер которых также может быть увеличен при расширении приложения.

Это код, который у меня пока есть.

 <Button Margin="16,0,16,6" Background="#daf0fc" BorderThickness="0" Height="Auto" HorizontalAlignment="Stretch" BorderBrush="White" Click="edit_house" Padding="0" Focusable="False">           

<Grid>

<Grid.RowDefinitions>
    <RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
    <ColumnDefinition />
    <ColumnDefinition />
</Grid.ColumnDefinitions>


                    <StackPanel Grid.Column="0" Orientation="Vertical" VerticalAlignment="Top" HorizontalAlignment="Left" Background="Black">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Margin="0,0,5,0" Text="{Binding house_number}" FontWeight="Bold" FontSize="14" />
                            <TextBlock Margin="0,0,0,0" Text="{Binding street}" FontWeight="Bold" FontSize="14" />
                        </StackPanel>
                        <TextBlock Text="{Binding postcode}" />
                        <TextBlock Margin="0,6,0,0" Text="{Binding house_type_text}" />
                    </StackPanel>

                    <StackPanel Grid.Column="1" Orientation="Vertical" VerticalAlignment="Top">
                        <StackPanel Orientation="Horizontal" VerticalAlignment="Top"  HorizontalAlignment="Left" Margin="0,2,0,0">
                            <TextBlock Text="£" HorizontalAlignment="Right" Foreground="#FF9D1818" FontWeight="ExtraBold" FontSize="16" />
                            <TextBlock Text="{Binding house_price}" HorizontalAlignment="Right" Foreground="#FF9D1818" FontWeight="ExtraBold" FontSize="16" />
                        </StackPanel>
                        <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Margin="0,0,0,0">
                            <TextBlock Margin="0,0,0,0" Text="{Binding sold_text}" HorizontalAlignment="Right" Foreground="#FF107910" FontWeight="ExtraBold" FontSize="14" />
                        </StackPanel>
                    </StackPanel>

Я попытался настроить растягивание каждой StackPanel половины, но они обе просто плавают в центре кнопки, поэтому я не могу выровнять текст ни на одной половине.

Вот графическое представление кнопки, которую я пытаюсь создать…

Кнопка разделена пополам

Обновить:

Вот что я получаю с приведенным выше кодом, к сожалению, я изо всех сил пытаюсь выровнять текст или заставить что-либо растягиваться на всю ширину каждой половины:

Обновить изображение

Ответ №1:

StackPanel этого не сделает; он просто складывает элементы.

Вместо этого используйте a <Grid> с двумя столбцами.

1. Спасибо за ваш ответ, я опубликовал представление кода, который у меня есть на данный момент. По какой-то причине он не показывает никаких данных, когда я использую сетку.

2. Это потому, что вы используете <ColumnDefinition Width=".50" /> . Измените .50 * или полностью удалите свойство Width. Кроме того, если у вас есть только одна строка, вам не нужно определять Grid.RowDefintions .

3. Вы указали ширину пикселя (0,5 пикселя). Либо не указывайте ширину, либо укажите ширину пропорции ( Width="1*" )

4. Хорошо, я удалил определения ширины. Если вы можете взглянуть на изображение обновления, которое я добавил, и подтолкнуть меня в правильном направлении, чтобы выровнять текст по левой и правой сторонам каждой половины, это было бы потрясающе! Я установил одну из панелей стека на черный фон, чтобы вы могли видеть ее границы. По сути, я мог бы использовать панели стека, чтобы использовать полную ширину «растягивания» каждой половины, но HorizontalAlignment=»Stretch», похоже, не работает. еще раз спасибо

5. Можно ли заставить StackPanel выравниваться по левому или правому краю внутри каждого столбца сетки?

Ответ №2:

StackPanel не является подходящим контейнером для этого. Попробуйте использовать сетку, подобную этой:

 <Button>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <StackPanel Grid.Column="0">
            ...
        </StackPanel>
        <StackPanel Grid.Colunn="1">
            ...
        </StackPanel>
    </Grid>
</Button>

1. Спасибо за вашу помощь. Если бы вы могли проверить ревизию, чтобы выровнять мой текст по панелям стека. Спасибо 🙂

2. Мне неясно, чего вы пытаетесь достичь. Не могли бы вы обновить графическое представление того, что вы ищете, фактическим выровненным текстом?

Ответ №3:

Мне нравится использовать UniformGrids, хотя сетка также подойдет, если вам нужно определить свои строки / столбцы по отдельности

Вот пример с правильными выравниваниями:

     <UniformGrid Columns="2">

        <StackPanel Background="LightBlue" >
            <StackPanel Orientation="Horizontal">
                <TextBlock Margin="0,0,5,0" Text="123" FontWeight="Bold" FontSize="14" />
                <TextBlock Margin="0,0,0,0" Text="Main Street" FontWeight="Bold" FontSize="14" />
            </StackPanel>
            <TextBlock Text="12345" />
            <TextBlock Margin="0,6,0,0" Text="Type" />
        </StackPanel>

        <StackPanel Background="Yellow">
            <StackPanel Orientation="Horizontal" VerticalAlignment="Top" Margin="0,2,0,0" HorizontalAlignment="Right">
                <TextBlock Text="£" HorizontalAlignment="Right" Foreground="#FF9D1818" FontWeight="ExtraBold" FontSize="16" />
                <TextBlock Text="100.00" HorizontalAlignment="Right" Foreground="#FF9D1818" FontWeight="ExtraBold" FontSize="16" />
            </StackPanel>
            <TextBlock Margin="0,0,0,0" Text="200.00" HorizontalAlignment="Right" Foreground="#FF107910" FontWeight="ExtraBold" FontSize="14" />
        </StackPanel>

    </UniformGrid>

Вам также может быть интересно проверить эту ссылку, которая дает вам быстрый визуальный обзор каждого из различных макетов WPF и того, как они действуют.

Метки: Разделяем кнопку пополам