Форматирование кнопки изображения WPF

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

Если я пытаюсь ограничить размер изображения и кнопку контейнера, изображение обрезается:

<Button Background="Transparent" Width="18" Height="18" Margin="0,0,0,0" Padding="0,0,0,0" BorderBrush="{x:Null}">
    <Image Width="16" Height="16" />
</Button>

Размер собственного изображения - 16x16. Здесь кнопка 18x18 с отступом 0, но изображение по-прежнему отключается справа/внизу.

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

Ответ 1

Красота (и проклятие?) WPF - это возможность управления шаблонами повторно.

Вы можете установить шаблон кнопки примерно следующим образом (это бесплатная комбинация, поэтому вам нужно немного подстроить ее для своих вкусов):

        <Button x:Name="btn16x16">
            <Button.Template>
                <ControlTemplate>
                    <Border HorizontalAlignment="Center" VerticalAlignment="Center" >
                        <Image Source="pack://siteoforigin:,,,/Resources/SixteenBySixteen.png" 
                               Width="16" 
                               Height="16"/>
                    </Border>
                </ControlTemplate>
            </Button.Template>
        </Button>

Ответ 2

Вы можете использовать Button.Background и ImageBrush в качестве примера следующим образом:

<Button Height="24" Width="24" >
    <Button.Background>
        <ImageBrush ImageSource="image name or path" Stretch="Fill" TileMode="None" />
    </Button.Background>
</Button>

Ответ 3

Вы должны удалить любые настройки Width и Height и установить кнопки HorizontalAlignment и VerticalAlignment на Center (или Left/Right или Top/Bottom соответственно.). По умолчанию эти свойства установлены на Stretch, что заставляет кнопку растягиваться на доступное пространство. Поскольку изображение является содержимым кнопки, оно также растягивается. Что-то вроде этого должно работать:

Возьмите этот пример кода:

<Button Background="Transparent" BorderBrush="{x:Null}" HorizontalAlignment="Center" VerticalAlignment="Center">
    <Image Source="thePathToYourImage" Stretch="None"/> <!-- EDIT: added Stretch="None" here! -->
</Button>

В качестве альтернативы альтернативный подразумевался следующий результат, который, очевидно (с учетом ваших комментариев), не является тем, что вы хотите.

Если вы хотите, чтобы кнопка растягивалась, но не изображение, вы также могли бы установить свойства выравнивания Image в значение, отличное от Stretch. Или вы можете установить свойство Stretch в None. Это сделает кнопку максимально возможной, но сохранит изображение с исходным размером (16x16). Это будет работать следующим образом:

<Button Background="Transparent" BorderBrush="{x:Null}">
    <Image Source="thePathToYourImage" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Button>
<!-- OR: -->
<Button Background="Transparent" BorderBrush="{x:Null}">
    <Image Source="thePathToYourImage" Stretch="None"/>
</Button>

Забастовкa >

Ответ 4

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