WPF Discussion Boards

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

Re: How To Style This Button

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

Re: How To Style This Button

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

[C#, ListView] Conditional Formating of ListView<T> Items

1-Apr-11 20:53

This[^] may help.

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.

Dirk.Bock1-Apr-11 4:11

Dirk.Bock

1-Apr-11 4:11

I have a ListView in my main window which displays data from a bound List<T>. This List is re-sorted according to different criteria according to user actions.

I want to apply conditional formatting to this ListView for both Font and Background, based on the contents of two different fields of the <T> objects.

At least the values of the field responsible for the Font formatting can change during run time.

I don't have any idea how to code this... Cry | :((

Hopefully

---Dirk Bock

Re: [C#, ListView] Conditional Formating of ListView Items

BobJanova1-Apr-11 4:21

BobJanova

1-Apr-11 4:21

Create a read only property on the object for the font and background that you want, and bind the relevant properties in the ItemTemplate?

navigation

arkiboys1-Apr-11 2:50

arkiboys

1-Apr-11 2:50

Hi,
This the type of xaml I am using to navigate...
Question:
Whether or not I use the TargetName="mainFrame" in the hyperlink button, the user still gets navigated to the Signup page inside the frame.
What is the benefit of using the TargetName in this case?
Thanks

&lt;navigation:Frame x:Name="mainFrame" UriMapper="{StaticResource UriMapper}"
                              Source="Home" HorizontalContentAlignment="Stretch"  VerticalContentAlignment="Stretch" &gt;
            &lt;/navigation:Frame&gt; 

&lt;stackpanel&gt;
...
&lt;HyperlinkButton x:Name="SignupLink" NavigateUri="Signup" TargetName="mainFrame" Content="Signup" Style="{StaticResource FooterLinksStyle}" /&gt;
                
&lt;/stackpanel&gt;

WPF Drag & Drop

Kevin Marois31-Mar-11 5:58

31-Mar-11 5:58

I want to enable drag/drop in my app.

1) Allow the user to drag a shape off a ToolBox onto the canvas (I'm assuming canvas is what I want). I could live with "click and place", versus drag onto the canvas.
2) Allow the user to move the control around on the canvas.

When I Google WPF Drag Drop all I seem to find is dragging data from one control to another, which is not what I want.

Anyone have an example of how to do this?

Everything makes sense in someone's mind

Re: WPF Drag & Drop

RugbyLeague31-Mar-11 6:00

RugbyLeague

31-Mar-11 6:00

Try this:

WPF Diagram Designer - Part 2[^]

Re: WPF Drag & Drop

Kevin Marois31-Mar-11 6:01

31-Mar-11 6:01

That's EXACTLY what I want

Thanks

Everything makes sense in someone's mind

Re: WPF Drag & Drop

Abhinav S31-Mar-11 22:26

31-Mar-11 22:26

How about this[^]?

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.

TreeView

RugbyLeague31-Mar-11 5:54

RugbyLeague

31-Mar-11 5:54

I understand that the WPF TreeView control is all whizzy and customisable but it is truly horrible to use - great wodges of code just to expand an item or select an item.

Are there any more usable TreeViews on the market? I have wasted an entire day (again) wrestling with the builtin TreeView and I have decided I want a TreeView which works. Anybody got any suggestions?

Re: TreeView [modified]

SledgeHammer0131-Mar-11 6:29