Отобразить изображение в ведущем контента в кнопке - PullRequest
Новая
       22

Отобразить изображение в ведущем контента в кнопке

4 голосов
/ 17 августа 2010

У меня есть кнопка со стилем, который отображает изображение внутри нее. Я хотел бы иметь возможность указать используемое изображение с помощью свойства Content на кнопке (или каким-либо другим способом).

Как это сделать, не вкладывая изображение непосредственно в кнопку. 

<BitmapImage x:Key="closeImage" UriSource="close.png" />

Я подумал, что могу указать имя файла изображения так: 

<Button Content="{{StaticResource closeImage}" x:Name="closeButton" Click="closeButton_Click" Style="{DynamicResource WindowToolboxButton}"/>

Style: 

    <Style x:Key="WindowToolboxButton" TargetType="{x:Type Button}">
        <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
        <Setter Property="Background" Value="{StaticResource ButtonNormalBackgroundFill}"/>
        <Setter Property="BorderBrush" Value="{StaticResource ButtonBorder}"/>
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid x:Name="grid" Height="15" Width="15">
                        <Border x:Name="border" CornerRadius="2,2,2,2" BorderBrush="#FFBBCDD2" BorderThickness="1" Opacity="0" Margin="0">
                            <Border.Background>
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop Color="#FF82A3AC" Offset="1"/>
                                    <GradientStop Color="#7FCDD9DC"/>
                                </LinearGradientBrush>
                            </Border.Background>
                        </Border>
                        <Image x:Name="image" Source="close.png" Stretch="None" VerticalAlignment="Center" HorizontalAlignment="Center" >

                        </Image>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Ответы [ 4 ]

0 голосов
/ 15 марта 2017

Заменить 

<Image x:Name="image" Source="close.png" Stretch="None" VerticalAlignment="Center" HorizontalAlignment="Center" >

С 

<Image x:Name="image" Source="{Binding Content, RelativeSource={RelativeSource AncestorType=Button}" Stretch="None" VerticalAlignment="Center" HorizontalAlignment="Center" >

Где ваш тип предка будет та кнопка, которая вызывается в xaml, и там вы можете установить содержимое этой кнопки, чтобы указать на какое-то изображение.

Пример: 

<cc:customButton  Content={StaticResource someImage}.../>
0 голосов
/ 18 августа 2010

Я думаю, что правильный способ сделать это -

  1. Создание нового пользовательского элемента управления ImageButton, производного от кнопки
  2. Создайте DP 'ImageSource' типа 'ImageSource' в ImageButton и в своем стиле привяжите источник изображения к этому DP.

Тогда вы можете использовать его как <ImageButton ImageSource={StaticResource ...}/>

Если вы попытаетесь добавить изображение, определенное в ресурсе, к элементу управления контентом, оно будет работать только в первый раз. При второй попытке добавить это же изображение в другой элемент управления содержимым произойдет сбой: «Указанный визуал уже является потомком другого визуала ...»

0 голосов
/ 15 мая 2013

На самом деле, это действительно легко.Используйте стиль, который у вас уже есть, и добавьте следующее к «изображению» 

Source="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}"

Затем (при условии, что изображение установлено как «Содержимое / Копировать, если новее»), вы можете установить содержимое с помощью Uri нужного изображения.. 

<Button Content="/[projectname];component/.../close.png" Style="{StaticResource WindowToolboxButton}" ... />

примечание: замените '[projectname]' именем вашего проекта, а '...' - путем к изображению

0 голосов
/ 18 августа 2010

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

<Window.Resources>
 <Image x:Key="test" Source="/Images/ChangeCase.png"/>
</Window.Resources>

<!-- Using a Resource for the Content -->
<Button Width="100" Height="20" Content="{StaticResource test}"/>

<!-- Specifying the Content directly -->
<Button Width="100" Height="20">
 <Image Source="/Images/ChangeCase.png"/>
</Button>

Плюс я заметил ошибку в вашем коде: 

<Button Content="{{StaticResource closeImage}" [...]

должно быть: 

<Button Content="{StaticResource closeImage}" [...]

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

Edit:

Хорошо, я попробовал твой стиль, и он также работает для меня. 

   <Style x:Key="WindowToolboxButton" TargetType="{x:Type Button}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid x:Name="grid" Height="15" Width="15">
                        <Border x:Name="border" CornerRadius="2,2,2,2" BorderBrush="#FFBBCDD2" BorderThickness="1" Opacity="0" Margin="0">
                            <Border.Background>
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop Color="#FF82A3AC" Offset="1"/>
                                    <GradientStop Color="#7FCDD9DC"/>
                                </LinearGradientBrush>
                            </Border.Background>
                        </Border>
                        <Image x:Name="image" Source="/Images/ChangeCase.png" Stretch="None" VerticalAlignment="Center" HorizontalAlignment="Center" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

  <Button Width="100" Height="20" Content="Test" Style="{DynamicResource WindowToolboxButton}"/>

Изображение показано. Однако я не вижу вашей границы из-за того, что для opacity-prop задано значение 0.

Содержимое, которое передается непосредственно кнопке, переопределяется стилем.

Может быть, что-то не так с вашим изображением? Вы установили его свойство сборки на Resource ?

...