WPF - создание кнопки шкалы выполнения и ее правильный размер

Question

Я пытаюсь создать кнопку в WPF, которая будет показывать прогресс, но текст кнопки все еще виден.

Я попытался добавить Grid в качестве дочернего элемента к кнопке и добавить ProgressBar и Label в сетку, думая, что Grid заполнит кнопку, а использование VerticalAlignment="Stretch" HorizontalAlignment="Stretch" на индикаторе выполнения и метке даст мне, в основном, интерактивную полосу выполнения, которая может показывать прогресс и иметь метку поверх нее . Однако у меня проблема с размером.

Это мой XAML:

        <Button Grid.Column="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" MinWidth="100" MinHeight="25" Margin="3">
            <Grid>
                <ProgressBar Value="10" Maximum="20" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
                <Label Content="asd2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" VerticalContentAlignment="Center" HorizontalContentAlignment="Center"/>
            </Grid>
        </Button>

Вот что я вижу:

Если я перейду на явный размер:

        <Button Grid.Column="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" MinWidth="100" MinHeight="25" Margin="3">
            <Grid>
                <ProgressBar Value="10" Maximum="20" Width="100" Height="30" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
                <Label Content="asd2" Width="100" Height="30" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" VerticalContentAlignment="Center" HorizontalContentAlignment="Center"/>
            </Grid>
        </Button>

, я получу:

Который , визуально, это улучшение, но XAML-программно хуже, так как я хочу, чтобы кнопка меняла размер вместе с окном, если пользователь не может ее хорошо видеть или что-то в этом роде. Кроме того, визуально - мне не нравится эта маленькая граница между фактической кнопкой и началом полосы прогресса, и я попытался установить для "padding" и "margin" значение 0, это не так.

Что я хотел бы видеть - индикатор выполнения занимает ВСЕ пространство кнопки, а текст метки остается центрированным как по вертикали, так и по горизонтали относительно общего размера кнопки.

Answer 1

Поместите свой <Grid> внутри ControlTemplate и замените свой <Button.Template>:

        <Button Grid.Column="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" MinWidth="100" MinHeight="25" Margin="3">
            <Button.Template>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <ProgressBar Value="10" Maximum="20" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
                        <Label Content="asd2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" VerticalContentAlignment="Center" HorizontalContentAlignment="Center"/>
                    </Grid>
                </ControlTemplate>            
            </Button.Template>
        </Button>    

То, что вы делали раньше, помещало свой <Grid> внутри ContentTemplate кнопки, а не его Template. Проблема с ContentTemplate заключается в том, что у него есть некоторые стили кнопок по умолчанию, такие как небольшая рамка, которая вам не нравится. Перемещая его в общий шаблон кнопки, вы говорите, что меня не волнует, как выглядит кнопка по умолчанию, я хочу, чтобы она выглядела точно так же, как ЭТО.

Как это может выглядеть:

Как это может выглядеть, если изменить размер окна: