WPF Discussion Boards

4-Apr-11 5:48

I'm fairly new to styling in WPF, and I could use some help. Truth is, I'm not really sure what to search for...

I want to style a RadioButton so that it looks like the buttons in Excel 2010'sBackStage area...

1) Open Excel 2010
2) Go to the File tab
3) In the Available Templates area, I want my buttons to look and behave like the Blank Workbook, Recent Templates, Sample, ect..., buttons as far as the MouseOver and Pressed styles.

Can anyone point me in the right direction?

Everything makes sense in someone's mind

SledgeHammer014-Apr-11 6:43

4-Apr-11 6:43

You mean the orange button here? Are you trying to do the entire view with the scrollable list of buttons? Or just one button that looks like that?

I don't think we can really explain control styling in one or two posts Smile | :)

.

Do you have Expression Blend? Or do you just have Visual Studio?

Personally, I'd use Expression Blend and dump out the control template for a stock button and modify it. That'll give you most of what you need. Click behavior, etc.

I'd probably define a new button class (derived from Button) that has an image DP as well so you make the whole thing reusable.

Kevin Marois4-Apr-11 6:58

Re: How To Style This Button [modified]

4-Apr-11 6:58

Yes, that's exactly what I' looking for.

Personally, I'd use Expression Blend and dump out the control template for a stock button and modify it. That'll give you most of what you need. Click behavior, etc.

Know any decent tutorials on how to do this?

Thanks

Everything makes sense in someone's mind

SledgeHammer014-Apr-11 7:08

4-Apr-11 7:08

This is assuming the stock Expression Blend window layout.

1) create a new project in Expression Blend
2) click on the assets tab in the upper left
3) select the controls folder (2nd item down in the left list)
4) drag a button onto the form (3rd item down in the right list)
5) in the bottom left window (Objects and Timelines), right click on the button and select Edit Template | Edit a Copy
6) Hit OK in the dialog
7) now your objects and Tiemlines window should say Template as the root item in the tree
8) right click on Template and select View XAML

The XAML will have the complete style for the stock WPF button control.

* <Style x:Key="ButtonFocusVisual"> is responsible for drawing the dashed line
* there are a few brushes defined
* <Style x:Key="ButtonStyle1" TargetType="{x:Type Button}"> is your main button style

Give that a look, if you know XAML already, it should be pretty easy to understand. You would just get rid of most of the look and feel and leave the content presenter, or maybe change that into a textblock and add an image.

Now, Aero buttons use the RenderXXX DPs to do some of the drawing, so you need to get rid of those... RenderMouseOver, RenderPressed, RenderDefaulted, etc. and move those into the Trigger section so you can customize it.

-- Modified Monday, April 4, 2011 2:57 PM

SledgeHammer014-Apr-11 7:15

4-Apr-11 7:15

I looked at the template a bit further and yeah, I'd get rid of the

<Microsoft_Windows_Themes:ButtonChrome ... > </Microsoft_Windows_Themes:ButtonChrome > tags and replace that with a Image and TextBlock.

The IsKeyboardFocused trigger needs to be modified. The ToggleButton.IsChecked event trigger can be removed. The IsEnabled trigger needs to be modified too (or removed if you don't need to support disabled buttons).

You need to also add the IsMouseOver and IsPressed triggers.

Its just a matter of having just the Image and TextBlock as the "default state" and then in the various triggers set the properties to give you the mouse over.

For example, you could do something like:

<Border Name="border" Background="Transparent" ... >
<TextBlock Name="textBlock" ...>

and then in the trigger, you would set "border".Background = "Orange"

Thats the basic concept of it, you have some stuff hidden or not visible in the default state and then make it visible or change colors, etc. in the triggers.

Kevin Marois4-Apr-11 7:18

Re: How To Style This Button [modified]

4-Apr-11 7:18

Excellent. Thanks alot. I'll take a look at it now.

Everything makes sense in someone's mind

Kevin Marois4-Apr-11 10:25

Re: How To Style This Button [modified]

4-Apr-11 10:25

[Update]

I got it. Here's my code:

<UserControl
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	mc:Ignorable="d"
	xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero" x:Name="Screen_1_Name"
	x:Class="WpfPrototype2Screens.Screen_1"
	Width="640" Height="480">

	<UserControl.Resources>
		<!--
		<ControlTemplate x:Key="ButtonTemplate" TargetType="Button">              
			<ContentPresenter Content="{TemplateBinding Content}"/>         
		</ControlTemplate>     
 		-->
		
		<Style x:Key="ButtonFocusVisual">
			<Setter Property="Control.Template">
				<Setter.Value>
					<ControlTemplate>
						<Rectangle Stroke="Black" StrokeDashArray="1 2" StrokeThickness="1" Margin="2" SnapsToDevicePixels="true"/>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
		
		<LinearGradientBrush x:Key="ButtonNormalBackground" EndPoint="0,1" StartPoint="0,0">
			<GradientStop Color="#F3F3F3" Offset="0"/>
			<GradientStop Color="#EBEBEB" Offset="0.5"/>
			<GradientStop Color="#DDDDDD" Offset="0.5"/>
			<GradientStop Color="#CDCDCD" Offset="1"/>
		</LinearGradientBrush>
		
		<SolidColorBrush x:Key="ButtonNormalBorder" Color="#FF707070"/>
		
		<Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
			<Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
			<Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
			<Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/>
			<Setter Property="BorderThickness" Value="1"/>
			<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
			<Setter Property="HorizontalContentAlignment" Value="Center"/>
			<Setter Property="VerticalContentAlignment" Value="Center"/>
			<Setter Property="Padding" Value="1"/>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="{x:Type Button}">
						<Microsoft_Windows_Themes:ButtonChrome x:Name="Chrome" SnapsToDevicePixels="true" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" RenderDefaulted="{TemplateBinding IsDefaulted}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}">
							<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" RecognizesAccessKey="True"/>
						</Microsoft_Windows_Themes:ButtonChrome>
															
						<ControlTemplate.Triggers>
							<Trigger Property="IsKeyboardFocused" Value="true">
								<Setter Property="RenderDefaulted" TargetName="Chrome" Value="true"/>
							</Trigger>
							<Trigger Property="ToggleButton.IsChecked" Value="true">
								<Setter Property="RenderPressed" TargetName="Chrome" Value="true"/>
							</Trigger>
							<Trigger Property="IsEnabled" Value="false">
								<Setter Property="Foreground" Value="#ADADAD"/>
							</Trigger>
							
							<Trigger Property="IsMouseOver" Value="false">
								<Setter Property="Background" Value="Transparent"/>
							</Trigger>
						</ControlTemplate.Triggers>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
	</UserControl.Resources>

	<Grid x:Name="LayoutRoot" Background="White">
		<Button Margin="241,142,279,163" 
				Style="{DynamicResource ButtonStyle1}" 
				BorderBrush="Transparent"
				Content="Button"/>
	</Grid>
</UserControl>

What did it was the Trigger and the transparent border brush on the button. When the mouse is NOT over the button, it's transparent. When the mouse is over it, the theme shows.

Coud you please elaborate on this:

<Microsoft_Windows_Themes:ButtonChrome ... > </Microsoft_Windows_Themes:ButtonChrome > tags and replace that with a Image and TextBlock.

Everything makes sense in someone's mind

modified on Monday, April 4, 2011 4:33 PM

SledgeHammer014-Apr-11 11:08

4-Apr-11 11:08

You want it to look like the button in that screen shot right? So, you'll notice that the default state is just the text and the image, only the hover and pressed states show orange. Microsoft_Windows_Themes:ButtonChrome is a Microsoft class in PresentationFramework.Aero. Its responsible for drawing the Aero button. You'll notice Aero buttons have a lot of cross fade effects, glow effects, etc. You don't need that anymore for this type of button.

You might want to make a few adjustments...

1) You implemented this as a UserControl. What you probably want to do is implement this as a Control derived from Button. That will come into play later. For example, if you name your new control BackStageButton:

public class BackStageButton : Button
{
}

2) Now you should change your style declaration to:

// define a xmlns called local or whatever

<Style TargetType="{x:Type local:BackStageButton}">

this way you'll automatically style all BackStageButton instances instead of having to manually set the style.

3) get rid of all the RenderXXX setters (but leave the events) in your triggers, the RenderXXX setters will draw your button like Aero which is not what we want.

4) You probably want to structure your XAML something like this:

<Border name="BdOuter" Background="Transparent" CornerRadius="2,2"> <-- this will be the outside orange border
<Border name="BdInner" Background="Transparent" CornerRadius="2,2"> <-- this will be the white border
<Border name="BdFill" Background=Transparent" CornerRadius="2,2"> <-- this will be the orange gradient fill
<StackPanel Orientation="Vertical">
<Image Source="{Binding Whatever}" /> <-- you'll need to add a DP of type ImageSource so the user can specify the image
<TextBlock Text="{Binding Content}" /> <-- this will bind to the Button.Content property which is already there.

You'll need to screw around with the various RGB values and properties and so forth...

Then in your mouse over trigger, you would set BdOuter.Background -> Orange, BdInner.Background -> White and BdFill.Background to your GradientBrush static resource

and then do something similiar for the pressed state, just altering the RGB values to match.

Makes sense?

-- Modified Monday, April 4, 2011 5:16 PM

SledgeHammer014-Apr-11 11:12

4-Apr-11 11:12

Just a side note on this, you might need to tweak that XAML structure to get the button to look exactly like that. For example, the gradient fill looks like its actually in 2 parts. The upper orange part and the bottom white part. My previous response should get you on your way though Smile | :)

Abhinav S4-Apr-11 21:13

WebBrowser Control not displaying

4-Apr-11 21:13

See A Style for Round Glassy WPF Buttons. This article might help you.

The funniest thing about this particular signature is that by the time you realise it doesn't say anything it's too late to stop reading it.

Grimes3-Apr-11 12:03

Grimes

3-Apr-11 12:03

Hi

I am having trouble displaying a WebBrowser control in my WPF application. The control seems to be invisible.

The WebBrowser is on my main form. The main form has a non rectangular shape, so it basically is a PNG image I use as the background, which also has a alpha channel. To enable the alpha channel I had to set the 'AllowsTransparent' property to true, but when I do this the WebBrowser Control turns invisible. I can see that it is only invisible since the mouse pointer still changes when I move my mouse over it, but the control it self is invisible.

I have changed some settings and I have seen that this is definitely caused by the 'AllowsTransparent' setting. I don't want to change this setting since turning it off removes the alpha channel from my PNG background.

Any help or ideas on how to fix this would be appreciated. Maybe there is another way to use the alpha channel or some other WebBrowser control.

thanks in advance

KOM UIT DAAAAA!!!

Re: WebBrowser Control not displaying

Grimes4-Apr-11 13:25

Grimes

4-Apr-11 13:25

After searching the web, I found a way to fix this. I just thought that I need to add it here to maybe help the next guy (or gal).

The solution I found best is to use a wrapper around the WebBrowser control. Here is an example
webbrowser-control-on-transparent-wpf-window

There were other possible solutions but they either did not work or had bugs.
here is a link to one of them:
http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/17fc75f6-db97-43ef-8ce5-f1aecaa15f86

KOM UIT DAAAAA!!!

How to use ListView.SelectedItems in MVVM?

SledgeHammer012-Apr-11 9:58

2-Apr-11 9:58

How are people using ListView.SelectedItems (note the 'S' at the end) in MVVM since its not a DP?

Mycroft Holmes2-Apr-11 12:48

Mycroft Holmes

2-Apr-11 12:48

Code behind - but then I'm only interested in getting the job done, I'm not a purist on MVVM or TDD.

Never underestimate the power of human stupidity
RAH

Abhinav S3-Apr-11 6:29

3-Apr-11 6:29

You need to use something that implements the ICollectionView interface. This interface, if implemented correctly, will give you the list of selected items.

The funniest thing about this particular signature is that by the time you realise it doesn't say anything it's too late to stop reading it.

Kevin Marois4-Apr-11 9:55

4-Apr-11 9:55

Would an ObservableCollection<> work?

Everything makes sense in someone's mind

SledgeHammer014-Apr-11 10:09

4-Apr-11 10:09

Actually, I resolved this issue over the weekend. What I ended up doing was... since I already have a "ListViewEx : ListView" type class where I've enhanced the ListView, I just added a "SelectedItemsEx" DP. The control listens to the SelectionChanged event as well as collection changed notifications on the SelectedItemsEx collection and keeps the two lists in sync. Works great and now I can just do "SelectedItemsEx={Binding SelectedItems}" in my XAML and have a SelectedItems property in my VM thats totally in sync with the control both ways. Only catch is that the collection binding to SelectedItemsEx has to implement IList and INotifyCollection changed, but all the collection classes do that already, so no biggie. VERY CLEAN solution Smile | :)

Kevin Marois4-Apr-11 10:26

4-Apr-11 10:26

Very nice.

Everything makes sense in someone's mind

Abhinav S4-Apr-11 21:12

Bing map control in a WPF application

4-Apr-11 21:12

No just an ObservableCollection<> will not work directly.

The funniest thing about this particular signature is that by the time you realise it doesn't say anything it's too late to stop reading it.

Jack_Sparow1-Apr-11 8:01

Jack_Sparow

1-Apr-11 8:01

Hi every one,
I m working on an apllication that uses bing map , and I m using WPF , can you please show me how to integrate the bing map control ?
thanks in advance

Re: Bing map control in a WPF application

Abhinav S1-Apr-11 20:53