Make WPF button look less flat - c#

I've got 2 buttons on my form, and they both look very, very flat.
I can't seem to find a way to make them look more like:
The XAML for my buttons is:
<Button x:Name="bttnDailyReport" HorizontalAlignment="Left" Margin="618,27,0,0" VerticalAlignment="Top" Width="121" Height="93" FontFamily="Microsoft Sans Serif" FontSize="20" FontWeight="Bold" Grid.Column="1" BorderBrush="Black">
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center"><Run Text=" Generate"/><LineBreak/><Run Text="Daily Report"/></TextBlock>
</Button>
<Button x:Name="bttnCancel" HorizontalAlignment="Left" Margin="618,126,0,0" VerticalAlignment="Top" Width="121" Height="93" FontFamily="Microsoft Sans Serif" FontSize="20" FontWeight="Bold" Click="BttnCancelClick">
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center"><Run Text="Exit"/></TextBlock>
</Button>
Now, my question is, is it possible to make the buttons appear like the button in WinForms, or am I stuck with flat buttons?

Seems, somewhere in your resources, flat button style is used as default style for button.
Check Styling and Templating. Either you need to override the style in your button, or give key to the default style, and apply wherever needed.
How to override a global style (that doesn't have an x:Key), or alternatively apply a named style to all type-targeted controls?

Just reference PresentationFramework.Aero.dll in your project and add this code to to the window's XAML:
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/PresentationFramework.Aero;component/themes/aero.normalcolor.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>

By default, buttons should look like the second image. To make sure that there is no "BoringButton" Style around that make your buttons look flat (as Tilak and Chris W suggest), try to explicitly clear your button's Style like this:
<Button x:Name="bttnDailyReport" Style="{x:Null}" >
Also, don't set your button's Background to a specific color (although that already looks OK in the code you posted).

Related

How do i change a combobox arrow color, in windows 8 store app

I have this combobox in a windows store app project
<ComboBox Grid.Row="2" x:Name="ContactoSelect" Width="200" Height="50" Margin="114,10,27,510" SelectedIndex="0" Background="White" SelectionChanged="ContactoSelect_SelectionChanged">
<x:String>Item 1</x:String>
<x:String>Item 2</x:String>
<x:String>Item 3</x:String>
</ComboBox>
i would like to change the color of the arrow, that is black by default.
How can i do that?
Right click on the control from the Design view
Select the option Edit Style>Edit a copy
A style will be created for the control in the xaml inside Page.Resources as ComboBoxStyle1(name varies according to your x:name)
You will find
<TextBlock x:Name="DropDownGlyph" Grid.Column="1" Foreground="{StaticResource ComboBoxArrowForegroundThemeBrush}" FontWeight="Bold" FontSize="{StaticResource ComboBoxArrowThemeFontSize}" FontFamily="{StaticResource SymbolThemeFontFamily}" HorizontalAlignment="Right" IsHitTestVisible="False" Margin="0,0,6,4" Text="" VerticalAlignment="Center"/>
Change the Foreground to the desired color you want.
eg: Foreground="Red" or any other resource binding.
You can define the style globally in your App.xaml so that it can be used else where as below
<ComboBox HorizontalAlignment="Left" Margin="187,130,0,0" VerticalAlignment="Top" Width="120" Style="{StaticResource ComboBoxStyle1}"/>
If you want to change the arrow for all ComboBox objects in your project you could add the following line to your App.xaml file and change "#FF000000" to the color you want.
<SolidColorBrush x:Key="ComboBoxArrowForegroundThemeBrush" Color="#FF000000" />
You might also be able to do this on a page/control level by specifying it in the resources.
From ComboBox styles and templates under Dark theme brushes

Add custom button to Form ControlBox

I want to know how to add additional button to Form ControlBox that is present at image below:
I know in this forum are few similar questions but no single one answered my question. I checked few links and its not that what i expected because its not working at every operating system. I checked those links:
http://www.codeproject.com/Articles/11510/Add-Transparent-Menus-and-XP-Titlebar-Buttons-to-y
http://www.codeproject.com/Articles/10171/Adding-a-Minimize-to-tray-button-to-a-Form-s-capti
Other idea is to change default click event and icon for MaximizeBox because i don't need this one in my app.
Scratch this - just realized it's a Winforms issue.
Kinda lame suggestion, but in WPF I'd do:
Drop the title
<Window> ... WindowStyle="None" ... /<Window>
Then roll my own:
<StackPanel Grid.Row="0" Orientation="Horizontal" HorizontalAlignment="Right">
<Button HorizontalAlignment="Right" Width="25" Content="Yo!"/>
<Button HorizontalAlignment="Right" Width="20" Content="-"/>
<Button HorizontalAlignment="Right" Width="20" Content="■"/>
<Button HorizontalAlignment="Right" Width="20" Content="X"/>
</StackPanel>
Caveats:
You will have to do a mouse capture to move the window, not difficult but not trivial either. Also change the style of the buttons to look like the regular icons etc
Not ideal I know, but in a pinch ...

How to associate user control to Hover Button?

I have the following user control
<UserControl x:Class="Kimect.Controls.ElementControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:Kimect"
mc:Ignorable="d" Width="50" Height="50" SizeChanged="UserControl_SizeChanged">
<Grid Name="mainGrid" MouseLeftButtonUp="element_MouseLeftButtonUp" Style="{StaticResource elementGrid}" >
<TextBlock Name="Number" Text="1" FontSize="15" Margin="0 0 2 0"
HorizontalAlignment="Right" VerticalAlignment="Top" />
<TextBlock Name="symbol" Text="H" FontSize="20"
HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
</UserControl>
Now I want to click on it with Kinect. I've researched and found KinectHoverButton.cs, but I have no clue how to associate the user control to the HoverButton. I'm on Kinect SDK 1.7.
First a side note, Kinect SDK 1.8 is the latest version and does support many new features. If it is possible for you to update to the latest SDK I would suggest looking into it. Among the changes is how you interact with buttons -- replacing the "hover" with a much more intuitive "press" action.
For your KinectHoverButton, I'm assuming you are using the one in the "ControlBasics-WPF" example.
The KinectHoverButton is a subclass of KinectButtonBase, which is turn is a subclass of a regular ButtonBase class. Here is link to the ButtonBase class on MSDN:
http://msdn.microsoft.com/en-us/library/system.windows.controls.primitives.buttonbase(v=vs.95).aspx
Finally, from the above link you'll notice that ButtonBase is a subclass of ContentControl:
public abstract class ButtonBase : ContentControl
... and you can put (just about) anything inside a ContentControl.
You will not want to ram your UserControl into a KinectHoverButton. Instead you want to create a KinectHoverButton that looks like your UserControl, and behaves as it should when using a gesture environment. You can create a UserControl that contains just a single KinectHoverButton if you want to reuse it.
As a simple example:
<KinectHoverButton>
<Grid>
<TextBlock Name="Number" Text="1" FontSize="15" Margin="0 0 2 0"
HorizontalAlignment="Right" VerticalAlignment="Top" />
<TextBlock Name="symbol" Text="H" FontSize="20"
HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
</KinectHoverButton>
... will create a Kinect enabled button that looks very close (you'll have to play with styling a little bit) to your existing UserControl.

Silverlight Tooltip Remain Visible With Mouseover

Hello and thanks for the help. I have a Treeview that I am populating with a Hierarchical data template, and currently the bottom nodes have a tooltip that generates a small stack panel that is populated with data specific to the item the mouse hovers over. I also have a button sitting in the tooltip, however, as the tooltip does not persist when the mouse moves over it, I am unable to make use of the button like I need to. My xaml looks like this:
<!--=========================== Hierarchical Data template for tree view -->
<!--template for bottom nodes-->
<sdk:HierarchicalDataTemplate x:Key="ModTemplate" ItemsSource="{Binding ApplicationModules}">
<StackPanel Orientation="Horizontal" > <!--======tooltip style to handle format for callout window============-->
<ToolTipService.ToolTip>
<ToolTip HorizontalOffset="0" VerticalOffset="0" Style="{StaticResource ModuleToolTipStyle}">
<StackPanel Width="150" Height="auto" >
<TextBlock Text="Module Info" FontWeight="Bold" TextAlignment="Center"/>
<TextBlock Text="Module State:" FontWeight="Bold" />
<TextBlock Text="{Binding Path=ModInfo.ModuleState}" />
<TextBlock Text="Module Start Time:" FontWeight="Bold" />
<TextBlock Text="{Binding Path=ModInfo.ModuleStartTime}"/>
<TextBlock Text="Module Down Time:" FontWeight="Bold"/>
<TextBlock Text="{Binding Path=ModInfo.ModuleDownTime}" />
<Button Content="More Info" Width="75"></Button>
</StackPanel>
</ToolTip>
</ToolTipService.ToolTip>
<!--============end tooltip style for callout window===================-->
<ContentPresenter Margin="0 0 4 0" Content="{Binding Icon}" />
<TextBlock FontStyle="Italic" Text="{Binding Path=ModuleName}" />
</StackPanel>
</sdk:HierarchicalDataTemplate>
I would like the tooltip to persist when the mouse moves over it so that I can wire an event to the button. How can I achieve this? Thanks again for the help.
You have a couple options to accomplish your goal that I'm aware of. You can go check out the Silverlight Advanced Tooltips project over on codeplex which does what you want (though I personally have not used it so can't give any kind of review.)
Or you can make your own with some creativity. If it were me I would probably skip all that mess, forget the ToolTipService all together and just make my own to dress it up since to a user, what you're providing isn't what they're used to in terms of a tooltip expectation anyway and have cross more over to a callout or popout functionality. I can make an example as soon as I get some freed up time if option #1 doesn't work for you but I hope it does. Essentially both my way, and that project link I provided would do the same thing, which is provide a delay after the MouseLeave event of what it's attached to so the user can get to it before it disappears. Then hand off its visibility condition to that object. Let me know if this doesnt work and I can give you an alternative example using nothing but XAML.

Creating Silverlight Overlay User Control

I'm creating a silverlight user control that will display a transparent overlay with text over whatever xaml is contained if a property is set to true. So for example:
<my:Overlay Message="You don't have access to this feature." ShowOverlay="{Binding IsFeatureAvailable}">
<TextBox />
<Button Content="Search" />
</my:Overlay>
What I'm not quite sure about is how to implement the ability to put arbitrary xaml inside my user control, like above.
Thanks for any help.
Inherit your OverlayControl from ContentControl. Your template would look something like:
<Grid>
<Grid x:Name="Overlay" Background="#30000000">
<ContentPresenter Content="{TemplateBinding Content}"/>
</Grid>
<TextBlock Text="{TemplateBinding Message}"/>
</Grid>
This should work
<Grid>
<my:Overlay Message="You don't have access to this feature." ShowOverlay="{Binding IsFeatureAvailable}"/>
<TextBox />
<Button Content="Search" />
</Grid>
Also you can derrive you Overly control from ContentControl, and put content and OverLay layer in grid like shown above

Categories