WPF Image Button форматирование

Question

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

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

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

Исходный размер изображения 16х16. Здесь кнопка имеет размер 18x18 с отступом 0, но изображение по-прежнему обрезается справа / снизу.

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

Answer 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>

Answer 2

Вы можете использовать Button.Background и ImageBrush в качестве экзамена, например:

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

Answer 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>

Answer 4

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