I have the below stackpanel that features 2 images. One of a tick and one of an exit.
<StackPanel Grid.Row="3" Orientation="Horizontal">
<Image Source="C:\Users\USER\Pictures\Tick.png" Height="100" Margin="55,10,0,5" HorizontalAlignment="Left" VerticalAlignment="Center" />
<Image Source="C:\Users\USER\Pictures\Exit.png" Height="88" Margin="75,10,20,5" HorizontalAlignment="Right" VerticalAlignment="Center"/>
</StackPanel>
How am I able to make these 2 images act like a button? I know that you can use < button /> to create a new button, but I want to add a sort of property that will act as a button click when clicked.
Edit: I do not want the image to look like a button does with the outline and click effect. It just needs to be the image.
You could completely customize the appearance of a button but still keep its functionality by creating a custom template:
<Button Click="Button_Click">
<Button.Style>
<Style TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Image Source="C:\Users\USER\Pictures\Tick.png" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>
The above sample button should look exactly like an image but still be clickable like any other button.
Why don't you just make the image the Content of a Button?
<Button Height="100" Margin="55,10,0,5" HorizontalAlignment="Left" VerticalAlignment="Center">
<Image Source="C:\Users\USER\Pictures\Tick.png"/>
</Button>
Related
I have two buttons that use a static common style:
<Button x:Name="BtnCreate" Height="22" Width="150" Style="{StaticResource Style.Button.Trash}"/>
<Button x:Name="aefae" Height="22" Width="150" Style="{StaticResource Style.Button.Trash}"/>
The style is very basic:
<Style TargetType="Button" x:Key="Style.Button.Trash"
BasedOn="{StaticResource {x:Type Button}}">
<Setter Property="Content">
<Setter.Value>
<StackPanel Orientation="Horizontal" >
<Image Source="{StaticResource Image.Trash}" Width="22" Height="22"/>
<Label Content="Save" VerticalAlignment="Center" Height="26" />
</StackPanel>
</Setter.Value>
</Setter>
</Style>
The style applies to the first button and display both the image an the text however the second button does not display anything except a grey button.
Why does the second button not use the static style?
As you're trying to add the same Content to two Buttons, elements (present in Style) cannot be added to two different Logical Parents. To avoid this, you can set x:Shared="False" to your style.
I'm using WPF (c#) form with background image (background imagebrush).
I want to make all the UI elements(button , title, textbox)... become semi-transparent so that they don't cover the image completely,
but the background image still being visible (not semi-transparent)
I would like a way we can do it without having to set all the opaque value of UI elements.
Maybe this could help
<Window.Resources>
<Style x:Key="transparentControls" TargetType="Button">
<Setter Property="Opacity" Value="0.1"/>
<Setter Property="Background" Value="Green"/>
</Style>
</Window.Resources>
<Grid>
<Grid.Background>
<ImageBrush ImageSource="MyImage.jpg"/>
</Grid.Background>
<Button Height="24" Width="100" Style="{StaticResource transparentControls}" VerticalAlignment="Top" Content="Hey"/>
<Button Height="24" Width="100" Style="{StaticResource transparentControls}" Content="There"/>
<Button Height="24" Width="100" Style="{StaticResource transparentControls}" VerticalAlignment="Bottom" Content="Click Me"/>
</Grid>
Just try to put all your UI elements in a Canvas or Grid and set the Opacity of that parent element.
Like that:
<Canvas Opacity="1">
<Button Width="100" Height="100"></Button>
</Canvas>
I hope this was what you meant.
i want to show a focus image around a text box when it got focus. so i create following style
<Style x:Key="TextBoxFocusVisualStyle">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Image Source="/WPFApp;component/Resources/txtFocus.png" Stretch="Fill" Margin="-8,-6,-8,-6"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
and in window xaml file i used this style as following
<TextBox Grid.Column="1" Height="34" Margin="186,48,0,0" Name="txtEmailId" VerticalAlignment="Top" KeyboardNavigation.TabIndex="0" MaxWidth="293" HorizontalAlignment="Left" Width="293" Text="" FocusVisualStyle="{DynamicResource TextBoxFocusVisualStyle}"/>
but problem is that it does not work during loading. When window load then initially focus is on that textbox and at that time it does not show the image .However when i navigate to other textbox (and other control) then it show focus image. and finally when i focus return to that textbox then it display the focus image
so problem is that it does not show focus image first time on when window loaded. Please suggest that where i am wrong.
Consider that FocusVisualStyle applies to a control only when focused by keyboard (TAB key).
This is different from the logical focus that you obtain for example using
Control.SetFocus()
For an overview on Focus have a look at
http://msdn.microsoft.com/en-us/library/aa969768.aspx
A possible workaround for your problem is work with DependencyProperty IsFocused an use Style instead of FocusVisualStyle
<Style x:Key="TextBoxStyle" TargetType="{x:Type Control}">
<Style.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Image Stretch="Fill" Margin="-8,-6,-8,-6" Source="/WPFApp;component/Resources/txtFocus.png" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
And then in the main Window
<TextBox Grid.Column="1" Height="34" Margin="186,48,0,0" Name="txtEmailId"
VerticalAlignment="Top" KeyboardNavigation.TabIndex="0" MaxWidth="293"
HorizontalAlignment="Left" Width="293" Text=""
Style="{DynamicResource TextBoxFocusVisualStyle}" Background="White" />
Hope this heps
Iam have been working on the control templates since few days,iam successfull in changing a button to the ellipse ,but when iam about to create a control template for button to be displyed as a image,i am not Successful.If any one can know it ,please help me out.
The following xaml shows a button with a ControlTemplate consisting of only an image:
<Button>
<Button.Template>
<ControlTemplate>
<Image Source="/arrow_down_blue.png" Stretch="None" />
</ControlTemplate>
</Button.Template>
</Button>
If you cannot get it to work, make sure that the path to your image is valid. The easiest way is to add the image to your solution and mark it as Resource, by right clicking the image in the solution explorer and setting Build Action to Resource. You can then reference the image by using a so called pack URI on the form:
/FolderName/OtherFolderName/FileName.png
The path above is relative to the root of the current project.
The ControlTemplate could also be set though a Style or by setting the Template property of the button to a StaticResource:
<Grid>
<Grid.Resources>
<ControlTemplate x:Key="ImageButtonTemplate">
<Image Source="/arrow_down_blue.png" Stretch="None" />
</ControlTemplate>
<Style TargetType="Button" x:Key="ImageButtonStyle">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Image Source="/arrow_down_blue.png" Stretch="None" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<StackPanel>
<Button Template="{StaticResource ImageButtonTemplate}" />
<Button Style="{StaticResource ImageButtonStyle}" />
</StackPanel>
</Grid>
An example of how to add triggers to your control template can be found in this question.
I have a Button template to define what my edit button should look like:
<ControlTemplate x:Key="EditButton" TargetType="{x:Type Button}">
<Button Style="{StaticResource GrayOutButtonStyle}" >
<Image x:Name="editImage" Source="{StaticResource EditIcon}" />
</Button>
</ControlTemplate>
I want to declare the Command in the XAML where I create the button (not in the template). But when I set the Command attribute in the Button, it's being ignored:
<Button Template="{StaticResource EditButton}"
Command="{Binding Source={StaticResource ViewModel}, Path=EditCommand}"
CommandParameter="{Binding}" />
What's wrong with my syntax?
(Note: If I remove the template from this button then the Command works, so it's something about using a template that's messing it up.).
Why does your Button template include another Button? That makes no sense and would suffer from a StackOverflow if your template was applied implicitly. It should just be the Image, in which case your command should work.
To be clear, what's happening is you have an outer Button which correctly has the ICommand applied to it. However, it's being rendered as another Button with an Image inside it. Hence, when you click the Image, you're actually clicking the inner Button, which has no ICommand associated with it. The outer Button never "sees" the click, so it never executes the command.
Your only other option, which I wouldn't recommend, but should work, is to have the inner button bind to the properties on the outer button:
<ControlTemplate ...>
<Button Command="{TemplateBinding Command}" CommandParameter="{Binding CommandParameter}" ...>
<Image .../>
</Button>
</ControlTemplate>
Another option to refer to the command is relative binding as below:
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Button Command="{Binding Path=Command, RelativeSource={RelativeSource AncestorType=Button}}">
<Image... />
</Button>
</ControlTemplate>
</Setter.Value>
</Setter>