In my wpf application I have a button. I want the button like to be background have an image and forground also have the image. How to do this?
Thanks in advance,
Karn
Not sure I understand what you want here, but here's two examples
Two different Images for foreground and background
<Button Content="Button" FontSize="50" Margin="0,0,263,155">
<Button.Background>
<ImageBrush ImageSource="C:\Time.png"/>
</Button.Background>
<Button.Foreground>
<ImageBrush ImageSource="C:\C1.png"/>
</Button.Foreground>
</Button>
Same Image as Foreground and Background
<Button Content="Button"
FontSize="50"
Foreground="{Binding RelativeSource={RelativeSource self}, Path=Background}">
<Button.Background>
<ImageBrush ImageSource="C:\Time.png"/>
</Button.Background>
</Button>
In general, you need to override the button's default appearance using a Style and / or a ControlTemplate.
For examples, you may want to see:
Using Templates to Customize WPF Controls, from MSDN Magazine (great starting point!)
This StackOverflow question on creating image buttons
Feel free to provide more specifics or some code if you're having trouble, and we'll be able to help further.
Related
We have a design requirement such that transparent buttons (with white text) are overlayed on a scenic background image. But here's the hard part, and my dilemma...
While the background image should be clear and visible OUTSIDE the image borders, the area INSIDE the buttons (the overlayed area) should be a blurred area of the background image. The idea is to make it easier for users to see the white text inside the button.
I'm a novice in XAML and even more unfamiliar with how to perform such complex styling. I have a starting point for the overlay layout, but this code does not attempt to solve the problem. It's simply a button over an image.
Any ideas or help on how to blur the area under the image?
<Grid Margin="0,0,0,12" Visibility="{Binding SignedIn, Converter={StaticResource BooleanToVisibilityConverter}, ConverterParameter=False}">
<Image Source="backgroundImage.png" Height="136" Stretch="Fill" HorizontalAlignment="Stretch" />
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
<Button x:Uid="SignInBtn" Content="SIGN IN" Style="{StaticResource TransparentButtonStyle}" HorizontalAlignment="Center" Command="{Binding SignInCommand}" IsEnabled="{Binding LoadingResults, Converter={StaticResource NotBoolConverter}}" />
</StackPanel>
</Grid>
There's no straightforward way to do this in a Windows Phone 8.1 app. Image effects are not supported in either Windows Phone Silverlight or in Windows.UI.Xaml.
The typical and easy solution would be to dim (rather than blur) the image by setting the Button's background to a partially transparent brush.
<Button Background="#7F000000" </Button>
If you want to put a bit more work into it you can crop the area of the bitmap behind the button, run your blur transform on it (take a look at the Lumia Imaging SDK) and then set the new, blurred image to the button.
Consider using Effects.
In addition, see if you can leverage this example:
<Style TargetType="Window">
<Setter Property="Background">
<Setter.Value>
<VisualBrush>
<VisualBrush.Visual>
<Image Source="Images\myImage.png">
<Image.Effect>
<BlurEffect Radius="20"/>
</Image.Effect>
</Image>
</VisualBrush.Visual>
</VisualBrush>
</Setter.Value>
</Setter>
...
I want to do something similar to Microsoft Powerpoint: I want to capture the current screen (or one grid from the current window), and then to set it as the content of the button (like powerpoint where there is a preview of the slides at the side bar).
What is the best way to do that? My current idea is to save it to PNG and then reload it as an image at the content of the button, but I'm sure there is a better way.
Thank you!
Try this:
<Grid>
<Viewbox
x:Name="Viewer"
Stretch="Uniform"
DataContext="{Binding ElementName=Thumbnail1, Path=Data}">
<Grid Width="224" Height="168" SnapsToDevicePixels="True" Margin="4,0,4,0">
<Grid.Background>
<VisualBrush Stretch="Uniform" TileMode="None" Visual="{Binding}" AlignmentY="Center"/>
</Grid.Background>
</Grid>
</Viewbox>
</Grid>
I was using saving as PNG approach in the beginning. Then I have found out the way as above. DataContext of the ViewBox is a canvas. I could create live previews of my screens this way however my screens were canvas objects.
I have a TextBox control and I would like to be able to set a background image and a background color.
Currently I can set one, or the other but not both. When I try to set both simultaneously I receive a "The property 'Background' is set more than once" error.
Here is the code I used:
<TextBox Name="tbImageTextBox">
<TextBox.Background>
<ImageBrush ImageSource="/Resources/Images/image.png"
AlignmentX="Right" Stretch="None"/>
<SolidColorBrush>#FF8D8A8A</SolidColorBrush>
</TextBox.Background>
</TextBox>
I have also attempted to set the background color in the style for the TextBox and the image in the <TextBox.Background>, but the color is ignored.
Use the grid resource for background as needed. Same resource can be used for multiple textboxes.
<Grid>
<Grid.Resources>
<ImageBrush x:Key="img" ImageSource="Blue hills.jpg"></ImageBrush>
<SolidColorBrush x:Key="brownBrush" Color="Brown"></SolidColorBrush>
</Grid.Resources>
<TextBox x:Name="test" Background="{StaticResource img}" Width="100" Height="40" />
</Grid>
I ended up putting the TextBox into a grid with the Background color set and applying the background image to the TextBox itself as using VisualBrush and DrawingBrush stretched my image or only applied the background color to the image - not the rest of the TextBox.
You will need to combine the colour and the image in a single Brush instance, you could use a DrawingBrush or a VisualBrush containing an Image control with your image and the Background set to the colour for example.
You probably want either a VisualBrush or a DrawingBrush. More information on those can be found at MSDN here. Something like this might get you started:
<Rectangle Width="75" Height="75">
<Rectangle.Fill>
<VisualBrush TileMode="Tile">
<VisualBrush.Visual>
<Grid>
<Image BaseUri="somepic.png" />
<Rectangle Brush="FF8D8A8A" />
</Grid>
</VisualBrush.Visual>
</VisualBrush>
</Rectangle.Fill>
</Rectangle>
I just need a button so simple that it looks like a TextBlock. Some time ago I saw an answer on SO to style the button based on a static style for a button in a menu but I cannot find that answer (and I have been searching for an hour). Does anyone know what system style I am referring to and the syntax to apply that style to a button?
Is it maybe the style used for a button in a ToolBar that you're referring to? The ToolBar control overrides the Button style so they appear flat. You can apply that style to a button like this...
<Button Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" />
If you want a button that looks like a TextBlock, you can make a button that is a TextBlock.
<Button Content="I'm a Button; click me">
<Button.Template>
<ControlTemplate TargetType="Button">
<TextBlock Text="{TemplateBinding Content}" />
</ControlTemplate>
</Button.Template>
</Button>
I want to get this.
buttons http://www.shrani.si/f/X/6Y/24Jhn9D3/buttns.png
Everything works so far, buttons act as filter and are bind to the grid control.
All i want is the icons and counter on the button.
Whats the correct way of implementing those?
<ToggleButton x:Name="IsErrorShown" Margin="4" Width="100" Content="{lex:LocText Errors, Assembly=Client}">
I have tried adding image like this:
<ToggleButton x:Name="IsErrorShown" Margin="4" Width="100" Content="{lex:LocText Errors, Assembly=Client}">
<StackPanel>
<Image Source="Resources/Warning"/>
</StackPanel>
</ToggleButton>
but i get error that prop. Content is defined more then once.
A WPF Button (or ToggleButton) is a content control, into which you can put anything.
I haven't checked, but these buttons probably have a horizontal stack panel or a DockPanel, with an Image and then one or two TextBlocks. You could make a template for these, and also use binding to set the TextBlock Text content from your viewmodel.
Snoop ( http://snoopwpf.codeplex.com/ ) is a great tool for finding out how other people have built things in WPF.
The Adam Nathan WPF book is excellent, and if you don't have it you should get it. http://www.amazon.co.uk/Windows-Presentation-Foundation-Unleashed-WPF/dp/0672328917
Here's an example:
<ToggleButton Height="24" Width="100">
<DockPanel>
<Image Source="c:\\temp\\me.jpg" Margin="3"/>
<TextBlock Text="20 Errors"/>
</DockPanel>
</ToggleButton>