Forums | NoesisGUI

Posted: **08 Nov 2021, 15:08**

I Create a button with a Background Image, Which is run Success. But When I Press the button, the Image is disappeared.
I try it in Blend, the Image is also disappeared. so it is WPF style.
But How to Implement Image Button like Unity style ? When press the button the image is dark, and when hover the button the image is light?

<UserControl x:Class="NoesisGUIStudy.NoesisGUIStudyMainView"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:noesis="clr-namespace:NoesisGUIExtensions;assembly=Noesis.GUI.Extensions">

    <Border Background="DodgerBlue" HorizontalAlignment="Center" VerticalAlignment="Center" Padding="50,20">
        <StackPanel x:Name="Container">
            <TextBlock Text="Hello World" FontSize="30" Foreground="White"/>
            <Button Content="Button" Margin="0,10,0,0">
                <Button.Background>
                    <ImageBrush ImageSource="button.png"/>
                </Button.Background>
            </Button>
        </StackPanel>
    </Border>
</UserControl>

Posted: **08 Nov 2021, 19:29**

The Button appearance and how each visual state is rendered is defined by its Template.

You can create the template depending on what are your requirements. For example, you can just have a semi-transparent rectangle over the image and the template will change its color when hovering or pressing the button:

<Grid
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Grid.Resources>
    <ControlTemplate x:Key="btnTemplate" TargetType="Button">
      <Grid>
        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
        <Rectangle x:Name="overlay"/>
      </Grid>
      <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
          <Setter TargetName="overlay" Property="Fill" Value="#40FFFFFF"/>
        </Trigger>
        <Trigger Property="IsPressed" Value="True">
          <Setter TargetName="overlay" Property="Fill" Value="#40000000"/>
        </Trigger>
      </ControlTemplate.Triggers>
    </ControlTemplate>
  </Grid.Resources>
  <Button Width="200" Height="100" Template="{StaticResource btnTemplate}">
    <Image Source="button.jpg"/>
  </Button>
</Grid>

Posted: **09 Nov 2021, 07:55**

Thank for you help!
I change the xmal to show button content text. The text is show successful, but it locate at top right of button. And if the xaml is runned in Blend, the text locate at center of button. is this an issue?

<UserControl x:Class="NoesisStudy.ButtonImage.MainView"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:ee="http://schemas.microsoft.com/expression/2010/effects">
    <Border Background="DodgerBlue" HorizontalAlignment="Center" VerticalAlignment="Center" Padding="50,20">
        <Border.Resources>
            <Style TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <Grid>
                                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>

                                <Border Background="{TemplateBinding Background}" 
                                        BorderBrush="{TemplateBinding BorderBrush}" 
                                        BorderThickness="{TemplateBinding BorderThickness}">
                                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          Margin="{TemplateBinding Padding}" 
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
                                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                                </Border>

                                <Rectangle x:Name="overlay"/>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter TargetName="overlay" Property="Fill" Value="#0CFFFFFF"/>
                                    <Setter Property="Cursor" Value="Hand" />
                                </Trigger>
                                <Trigger Property="IsPressed" Value="True">
                                    <Setter TargetName="overlay" Property="Fill" Value="#19000000"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Border.Resources>
        <StackPanel>
            <TextBlock Text="Hello World" FontSize="30" Foreground="White"/>
            <Button Width="200" Height="60"  Content="123" Foreground="White">
                <Button.Background>
                    <ImageBrush ImageSource="flower.jpg"/>
                </Button.Background>
            </Button>
        </StackPanel>
    </Border>
</UserControl>

Posted: **09 Nov 2021, 10:41**

Hi, in your template you added a new ContentPresenter, you only need 1 for a Button control. The new ContentPresenter bounds its HorizontalAlignment/VerticalAlignment to the HorizontalContentAlignment/VerticalAlignment properties. If you set those in the style to Center, the content will appear centered in the Border. In Blend those properties are coming from the operating system default style for the Button. In Noesis our minimal default styles set those properties to Stretch for all controls.

<UserControl x:Class="NoesisStudy.ButtonImage.MainView"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:ee="http://schemas.microsoft.com/expression/2010/effects">
    <Border Background="DodgerBlue" HorizontalAlignment="Center" VerticalAlignment="Center" Padding="50,20">
        <Border.Resources>
            <Style TargetType="Button">
              <Setter Property="HorizontalContentAlignment" Value="Center"/>
              <Setter Property="VerticalContentAlignment" Value="Center"/>
              <Setter Property="Template">
                <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <Grid>
                                <Border Background="{TemplateBinding Background}" 
                                        BorderBrush="{TemplateBinding BorderBrush}" 
                                        BorderThickness="{TemplateBinding BorderThickness}">
                                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
                                          Margin="{TemplateBinding Padding}" 
                                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                                </Border>
                                <Rectangle x:Name="overlay"/>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter TargetName="overlay" Property="Fill" Value="#0CFFFFFF"/>
                                    <Setter Property="Cursor" Value="Hand" />
                                </Trigger>
                                <Trigger Property="IsPressed" Value="True">
                                    <Setter TargetName="overlay" Property="Fill" Value="#19000000"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Border.Resources>
        <StackPanel>
            <TextBlock Text="Hello World" FontSize="30" Foreground="White"/>
            <Button Width="200" Height="60"  Content="123" Foreground="White">
                <Button.Background>
                    <ImageBrush ImageSource="flower.jpg"/>
                </Button.Background>
            </Button>
        </StackPanel>
    </Border>
</UserControl>

You can also inherit your local style from the one defined in the theme (in Application Resources) by setting the BasedOn property. This way you will reuse all the setters specified by the theme style and only change locally the properties you want:

<Style TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">

Forums | NoesisGUI

How to Implement Image Button like Unity style?

How to Implement Image Button like Unity style?

Re: How to Implement Image Button like Unity style?

Re: How to Implement Image Button like Unity style?

Re: How to Implement Image Button like Unity style?