I have just implemented these ToggleButtons using ControlTemplates that set the Image content according to IsChecked stated. The images are made in Photoshop, but I want them as WPF vectors.
The buttons look like these when IsChecked=False:
And when IsChecked=True I just replace the Image with another PNG:
I've designed the button images in photoshop. They have the following image layers:
Translucent shape (a square with two round corners for the edge buttons)
Translucent lines for division lines
Icon
Text
Translucent gradient for the glass reflex effect
I recognize that this is not the most flexible design and I'd rather have the same buttons in a vector form, but I have no idea on how to do it.
Here's the xaml from one of the buttons (feel free to suggest other alternatives on how to implement the buttons as well):
<ControlTemplate x:Key="ResetButtonTemplate" TargetType="{x:Type ToggleButton}">
<Image x:Name="ImageReset" Source="images\button_reset_gray.png"/>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="False">
<Setter Property="Cursor" Value="Hand" />
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="ImageReset" Property="Source" Value="images\button_reset_red.png"/>
<Setter Property="IsEnabled" Value="False" />
<Setter Property="Cursor" Value="Arrow" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<StackPanel Orientation="Horizontal" Margin="20">
<ToggleButton Name="buttonRun" Width="102" Height="102" Template="{StaticResource RunButtonTemplate}" Checked="buttonRun_Checked" />
<ToggleButton Name="buttonPause" Width="102" Height="102" Template="{StaticResource PauseButtonTemplate}" Checked="buttonPause_Checked" />
<ToggleButton Name="buttonReset" Width="102" Height="102" Template="{StaticResource ResetButtonTemplate}" Checked="buttonReset_Checked" />
</StackPanel>
Try to look at Expression Studio. Some of the apps in the suite have ability to import photoshop formats.
Although, in the worst case, manually creating such images in Blend is not a big deal.
Related
I'm using the latest version of Fluent.Ribbon. I've been doing some styling, most of which requires completely replacing the Styles and ControlTemplates, but I've hit a snag. The title of my app is centered in the header bar and I can't get it to move to the left.
My visual tree looks like this:
MainWindow
Grid
Adorner
Grid
DockPanel
PART_Icon
PART_RibbonTitleBar
Grid
PART_HeaderHolder [ContentPresenter]
TextBlock
PART_ItemsContainer
PART_QuickAccessToolbarHolder
I copied the current version of the Fluent:RibbonTitleBar ControlTemplate and Style into my override xaml for modification, but nothing I do makes any difference (yes it is loading my overriding styles.)
When I use the inspector tool in the app, the only elements I can highlight are the innermost TextBlock, which fits the text exactly with no stretch, and the DockPanel several levels above, which stretches the full window width. In the original window ControlTemplate, which you can see here, The RibbonTitleBar is the last element of the DockPanel which has LastChildFill set. The RibbonTitleBar does have a RenderSize of the full width, but then the Grid below it has a RenderSize of 0,0. Then PART_HeaderHolder inside that has a RenderSize that exactly covers the title text.
It doesn't seem to matter if I set HorizontalAlignment on various elements to Left or Stretch. I also tried changing the innermost Grid to other container types such as DockPanel and StackPanel. Nothing changes anything about the layout.
Here's my style overrides for the RibbonTitleBar. The only change I've made is that I moved the QuickAccessToolbar to the end and permanently collapsed it (if I try deleting it, the app crashes looking for it) and I tried defining some columns on the inner Grid to no avail.
<Style TargetType="{x:Type Fluent:RibbonTitleBar}">
<Setter Property="Template"
Value="{DynamicResource RibbonTitleBarControlOverride}" />
<Setter Property="Focusable"
Value="False" />
<Setter Property="VerticalAlignment"
Value="Top" />
<Setter Property="HorizontalAlignment"
Value="Stretch" />
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Margin="-2,0"
VerticalAlignment="Center"
HorizontalAlignment="Stretch"
Text="{Binding}"
TextWrapping="NoWrap"
TextTrimming="CharacterEllipsis" />
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
<ControlTemplate x:Key="RibbonTitleBarControlOverride"
TargetType="{x:Type Fluent:RibbonTitleBar}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ContentPresenter Grid.Column="0" x:Name="PART_HeaderHolder"
HorizontalAlignment="Left"
ContentSource="Header"
IsHitTestVisible="False" />
<Fluent:RibbonContextualGroupsContainer Grid.Column="1" x:Name="PART_ItemsContainer"
IsItemsHost="True" />
<ContentPresenter x:Name="PART_QuickAccessToolbarHolder"
ContentSource="QuickAccessToolBar" Visibility="Collapsed" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsCollapsed"
Value="True">
<Setter Property="Visibility"
Value="Collapsed"
TargetName="PART_ItemsContainer" />
</Trigger>
<Trigger Property="HideContextTabs"
Value="True">
<Setter Property="Visibility"
Value="Collapsed"
TargetName="PART_ItemsContainer" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
I am working on a project where Image is getting display into a grid panel. and I need to show different tooltip on different areas of image. i can hard code the image coordinates but the issue is when I resize the window, the hard code part will not work.
kindly suggest.
Something like this could work for you:
<Grid>
<Image />
<UniformGrid Columns="2" Rows="2">
<UniformGrid.Resources>
<Style TargetType="Border">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="Gray" />
<Setter Property="BorderThickness" Value="1" />
</Style>
</UniformGrid.Resources>
<Border ToolTip="0,0"/>
<Border ToolTip="0,1"/>
<Border ToolTip="1,0"/>
<Border ToolTip="1,1"/>
</UniformGrid>
</Grid>
The borders are for demonstration only. Use more columns and rows for more detail.
i have the following control template:
<ControlTemplate x:Key="GrayButton" TargetType="{x:Type Button}">
<Grid>
<Image x:Name="GrayButtonImage" Source="/Server;component/Images/bg.bmp"/>
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White" Text="{x:Static props:Resources.IDS_ABORT}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="True">
<Setter TargetName="GrayButtonImage" Property="Source" Value="/Server;component/Images/GrayButtonOn.bmp"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="GrayButtonImage" Property="Source" Value="/Server;component/Images/GrayButton.bmp"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
and here's one button using the control template:
<Button Height="40" HorizontalAlignment="Left" Margin="250,334,0,0" Name="ejf" VerticalAlignment="Top" Width="106" Template="{StaticResource GrayButton}" Click="execJournalPrgm" IsEnabled="False"/>
I need roughly 4-8 more buttons that vary only by text name/color... what is the best way to do this without repeating the control template definition 4-8 times?
any help would be greatly appreciated.
One way to do this is by making a custom control (by inheriting from Button) and setting up all the necessary properties which should be bound in the default template. Then you only need to create instances of that control and set those properties instead of changing anything in the template.
I have a WPF application that has a light and a switch. When I press the switch the switch and light should change to its "ON" image and when I press again they should change to their "OFF" images. I have a single restriction: I can only do this strictly in XAML and therfore no code-behind files.
The way I do this is to redefine the control template for ToggleButton. Only the light switch is in this control template (the light itself shouldn't be clickable), and that is apparently my problem. I can't access the light switch from inside the control templates triggers. I get the following error "Cannot find the Trigger target 'lightImage'. (The target must appear before any Setters, Triggers, or Conditions that use it.)"
Heres my code:
<Image Name="lightImage" Source="Resources/LOFF.bmp" Stretch="None" Canvas.Left="82" Canvas.Top="12"/>
<ToggleButton Canvas.Left="169" Canvas.Top="123">
<ToggleButton.Template>
<ControlTemplate TargetType="ToggleButton">
<Image Name="switchImage" Source="Resources/SUp.bmp"/>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="switchImage" Property="Source" Value="Resources/SDown.bmp" />
<Setter TargetName="lightImage" Property="Source" Value="Resources/LON.bmp"/>
</Trigger>
<Trigger Property="IsChecked" Value="False">
<Setter TargetName="switchImage" Property="Source" Value="Resources/SUp.bmp"/>
<Setter TargetName="lightImage" Property="Source" Value="Resources/LOFF.bmp"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</ToggleButton.Template>
</ToggleButton>
Is there another way to do this?
Cheers
You seem to have "onImage", but trying to reference "lightImage"?
Edit: since those triggers are inside your control template I think it looks for "lightImage" only inside that template. You should create a property for 'source' in the code behind and bind to that both in your image and button.
Edit2: if no code behind maybe you could try some relative binding along the lines of:
{Binding RelativeSource={RelativeSource
FindAncestor, AncestorType={x:Type Canvas}},
Path=lightImage.Source}
Sorry if this is completely stupid, I use Silverlight and this is only available in WPF, so only a wild guess!
Anyway, idea comes from this cheatsheet, seems you can have quite complex bindings in WPF, so worth trying a few different ones: http://www.nbdtech.com/Free/WpfBinding.pdf
Finally, I fixed it. I didn't consider that you could use the "IsHitTestVisible" property on the image I didn't want to be clickable. With that property I could just put the lightImage inside the controltemplate and voila.
Heres the code:
<ToggleButton Canvas.Left="81" Canvas.Top="20">
<ToggleButton.Template>
<ControlTemplate TargetType="ToggleButton">
<Canvas>
<Image x:Name="lightImage" Source="Resources/LOFF.bmp" IsHitTestVisible="False" />
<Image x:Name="switchImage" Source="Resources/SUp.bmp" Canvas.Left="88" Canvas.Top="100"/>
</Canvas>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="lightImage" Property="Source" Value="Resources/LON.bmp"/>
<Setter TargetName="switchImage" Property="Source" Value="Resources/SDown.bmp"/>
</Trigger>
<Trigger Property="IsChecked" Value="False">
<Setter TargetName="lightImage" Property="Source" Value="Resources/LOFF.bmp"/>
<Setter TargetName="switchImage" Property="Source" Value="Resources/SUp.bmp"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</ToggleButton.Template>
</ToggleButton>
I have a WPF app that draws text on an Aero glass background. The problem is that based on what is displayed behind my application, the text drawn on the glass background can become hard-to-read to downright-impossible-to-read.
As you can see in the following screenshot, the Save, Undo and Redo text blocks become hard to read if the window behind my application is dark.
Now, Microsoft applications, such as Word, solve this with a kind of blur behind text, as you can see in the next screenshot:
I've heard there is some kind of Win32 API call I can make to get this to work. However, that is just hearsay to me at this point, I have no facts to back that up.
I've tried a few different WPF-specific things to approximate what Word does:
Drop shadows on text
Transparent images of text with a blur baked in (instead of a TextBlock)
None of those give me usable results, they all look pretty crummy. Does anyone know of any method, WPF or Win32, that I could use to draw text the way Microsoft does on glass (i.e., readable)?
I was able to solve this without Win32 (requires .NET 3.5).
<Grid>
<TextBlock Foreground="Black" HorizontalAlignment="Center" Margin="0,10,30,0" Text="Text that should be visible on Aero Glass">
<TextBlock.Effect>
<BlurEffect Radius="15" KernelType="Gaussian">
</BlurEffect>
</TextBlock.Effect>
</TextBlock>
<TextBlock HorizontalAlignment="Center" Foreground="White" Margin="0,10,30,0" Text="Text that should be visible on Aero Glass">
</TextBlock>
</Grid>
This code has the effect of doubling up text and blurring the version of the text that is farther behind, Z-index wise. Works like a charm for me.
One thing to note:
This seems to work best if the text color is white and the blur color is black. It doesn't look so good the other way around. The good news is it looks good regardless of what is behind your Aero Glass window.
The Win32 function you are searching for is DrawThemeTextEx. It has a flag that allows you to draw text with a white glow/blur in the background.
You can find an example here: C# Transparent GUI
In case anyone looking for another example, try this it includes backward support for non glass:
Usage:
Style="{StaticResource glassText}"
Goes in a resource dictionary:
<Style TargetType="TextBlock" x:Key="glassText">
<Setter Property="Foreground" Value="Black" />
<Style.Triggers>
<Trigger Property="Foreground" Value="Black">
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect Color="White" BlurRadius="10" RenderingBias="Performance" ShadowDepth="0" Direction="0" />
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
<Style TargetType="TextBlock" x:Key="glassLink" BasedOn="{StaticResource glassText}">
<Setter Property="Foreground" Value="#FF0066CC" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Cursor" Value="Hand" />
<Setter Property="TextDecorations" Value="Underline" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="{x:Static SystemColors.GrayTextBrush}" />
</Trigger>
</Style.Triggers>
</Style>