changing a static resource during runtine is something that sounds not possible.
I have a TextBox which displays a simple number. Then I have defined a style, which changes the Template of the TextBox to become a round TextBox:
<Style x:Key="RoundNumberDisplay" TargetType="TextBox">
<Setter Property="Width" Value="22"/>
<Setter Property="Height" Value="22"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border x:Name="brd1" Width="20" Height="20" CornerRadius="15">
<TextBlock x:Name="txt1" Foreground="#222" TextAlignment="center" Text="1" FontSize="14" FontWeight="ExtraBold" VerticalAlignment="center" />
<Border.Background>
<RadialGradientBrush GradientOrigin=".3, .3">
<GradientStop Color="{StaticResource ColorBackground1}" Offset=".15"/>
<GradientStop Color="{StaticResource ColorForeground1}" Offset="1"/>
</RadialGradientBrush>
</Border.Background>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
As you can see, the displayed text is "hard-wired" in the TextBlock "txt1". So obviously, I can't change the number during runtime.
My question now is: What is the best way to change the displayed number? Creating a Style for each number looks a bit ineffective to me.
Thanks in advance,
Frank
TemplateBinding to be able to set the value of the txt1-Text-Property from the target TextBox. Important: The target-type for the ControlTemplate must be set!
<Style ...
<ControlTemplate **TargetType="TextBox"**>
...
<TextBlock x:Name="txt1" Foreground="#222" TextAlignment="center" **Text="{TemplateBinding Text}"** FontSize="14" FontWeight="ExtraBold" VerticalAlignment="center" />
</ControlTemplate>
</Style>
The Style is just the look of the control, so in practice you'll need to re-use this style multiple times. A purist might say you shouldn't include data like the numbers (which must mean something in your application context) in a Style. So you could vary the number displayed when you use the style:
<TextBox Style={StaticResource RoundNumberDisplay} x:Name="TextBoxOne" Text="1"/>
Even then, you might prefer to bind Text to your ViewModel (or whatever you use for data) and pull the number from there. Either one is Ok imo.
Related
I use telerik, but that should not mean much for this question. My application is WPF (.Net 4.5).
I have a style, that I use for all comboboxes, which has an errortemplate. The style looks like this:
<Style TargetType="{x:Type telerik:RadComboBox}" x:Key="RadComboBoxStyle" >
<Setter Property="FontFamily" Value="Calibri"/>
<Setter Property="FontSize" Value="12"/>
<Setter Property="Background" Value="{StaticResource InputBrush}" />
<Setter Property="BorderBrush" Value="{StaticResource InputBorderBrush}" />
<Setter Property="Validation.ErrorTemplate" Value="{StaticResource RadComboBoxValidationErrorTemplate}" />
</Style>
My ErrorTemplate looks like this:
<ControlTemplate TargetType="{x:Type Control}" x:Key="RadComboBoxValidationErrorTemplate">
<Grid ToolTipService.IsEnabled="True" ToolTipService.ShowOnDisabled="True"
ToolTip="{Binding ElementName=customAdorner, Path=AdornedElement.(Validation.Errors), Converter={StaticResource ValidationErrorsConverter}}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border BorderBrush="{StaticResource ErrorBrush}" BorderThickness="3" Panel.ZIndex="999" HorizontalAlignment="Right" Margin="0,0,10,0"
Background="Transparent" DockPanel.Dock="right" Width="16" Height="16" CornerRadius="10">
<Rectangle Fill="{StaticResource ErrorBrush}" HorizontalAlignment="Stretch" VerticalAlignment="Center" Height="3" RenderTransformOrigin="0.5,0.5">
<Rectangle.RenderTransform>
<RotateTransform Angle="315" />
</Rectangle.RenderTransform>
</Rectangle>
</Border>
<AdornedElementPlaceholder Name="customAdorner" VerticalAlignment="Center" >
<Border BorderBrush="{StaticResource ErrorBrush}" BorderThickness="1" />
</AdornedElementPlaceholder>
</Grid>
</ControlTemplate>
The entire thing is defined in a global ResourceDictionary.
What this code does, it to put a "forbidden sign" on top of the combobox (Panel.ZIndex="999"), just before the dropdown button (using margins). The Border and the Rectangle makes a sign much like this: Picture.
The combobox itself must be able to hold a tooltip, set locally. So the error-message cannot be shown in the tooltip of the combobox - unless I find a way to combine the two without having to resolve it locally (I want that code in my resourcedictionary).
I also do not want the "forbidden sign" to handle mouse clicks (it gobbles up the click and prevent the combobox from dropping down, if the user clicks on the "forbidden sign".
I tried setting IsHitTestVisible to false on the grid and on the border inside the ErrorTemplate, but that caused the Tooltip to never show.
I also tried setting IsEnabled to false on the same two constrols, but that would not send the mouseclick on to the combobox itself (the list in the combobox does not drop down).
Is there any way to do this directly in the combobox-style or errortemplate? I do not even mind having a code behind - but I really do not want to add code locally where the combobox-style is used.
Hello
First sorry for my english.
I have started recently my first project on wpf. I´m styling a custom DataGrid who have been defined programatically (the xaml code doesn´t exists).
I have styled all that i need in my datagrid control except a checkbox that i wrapped inside.
The problem is that in other place of my application i defined a checkbox style how are applying correctly but i can´t apply inside my datagrid.
Actually my datagrid doesn´t throw syntax errors but when the datagrid runs the checkbox styles doesn´t apply.
The style code look like this (its defined in a stylesheet)
... <Setter Property="DataGridCheckBoxColumn.ElementStyle">
<Setter.Value>
<Style TargetType="{x:Type CheckBox}">
<Setter Property="Background" Value="Yellow"/>
<Setter Property="BorderBrush" Value="{DynamicResource NormalBorderBrush}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CheckBox}">
<BulletDecorator Background="Transparent">
<BulletDecorator.Bullet>
<Grid Width="13" Height="13">
<Border x:Name="Border" Background="Pink" BorderBrush="Black" BorderThickness="1,1,1,1" CornerRadius="2,2,2,2"/>
<Path x:Name="CheckMark" Stroke="Green" StrokeThickness="2" SnapsToDevicePixels="False" Data="M1.5000001,1.5833334 L9.7920001,9.6666667 M1.5420001,9.6666667 L9.7083333,1.5000001" Margin="1" ClipToBounds="False" StrokeEndLineCap="Round" StrokeStartLineCap="Round"/>
</Grid>
</BulletDecorator.Bullet>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True"/>
</BulletDecorator>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>...
Its exactly the same that it`s applying in the apliccation.
I´ve read a lot about it but i can´t to apply it, i tried, also, setting the setter property to "DatagridBoundColum.ElementStyle" and also to "CellStyle" but it doesn´t work.
Any suggest??
Thank a lot.
Do it like you would do in xaml:
<UserControl.Resources>
<DataTemplate x:Key="CheckBoxTemplate">
<CheckBox Style="{StaticResource AnyResourceKeyInApplciation}"/>
</DataTemplate>
</UserControl.Resources>
<DataGrid x:Name="dataGrid" />
this.dataGrid.Columns.Add(new DataGridTemplateColumn
{
CellTemplate = this.Resources["CheckBoxTemplate"] as DataTemplate
}
);
Thanks for your Reply vorrtex.
I didn´t apply it exactly but it helped me to find the solution, however i would have liked not to modify the VB code and only to modify it the xaml style tag.
I find an object how simplify this task. The syntax it´s the following:
column2.ElementStyle = Application.Current.FindResource("CheckBoxStyle")
It´s applying style ok inside the datagrid. But actually it´s placing at left border of the cell. I´ll try to find why.
Thanks again.
You can try this
<Controls:DataGridCheckBoxColumn Header="Homme" Binding="{Binding Homme}">
<Controls:DataGridCheckBoxColumn.ElementStyle>
<Style TargetType="CheckBox" BasedOn="{StaticResource {x:Type CheckBox}}">
<Setter Property="Margin" Value="4,0,0,0"/>
</Style>
</Controls:DataGridCheckBoxColumn.ElementStyle>
</Controls:DataGridCheckBoxColumn>
I have a button with a style that displays an image inside it. I would like to be able to specify the image it uses using the Content property on the button (or some other means).
How can accomplish this without actually nesting an image directly in the button.
<BitmapImage x:Key="closeImage" UriSource="close.png" />
I thought I could maybe specify the image file name like so:
<Button Content="{{StaticResource closeImage}" x:Name="closeButton" Click="closeButton_Click" Style="{DynamicResource WindowToolboxButton}"/>
Style:
<Style x:Key="WindowToolboxButton" TargetType="{x:Type Button}">
<Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
<Setter Property="Background" Value="{StaticResource ButtonNormalBackgroundFill}"/>
<Setter Property="BorderBrush" Value="{StaticResource ButtonBorder}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid x:Name="grid" Height="15" Width="15">
<Border x:Name="border" CornerRadius="2,2,2,2" BorderBrush="#FFBBCDD2" BorderThickness="1" Opacity="0" Margin="0">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF82A3AC" Offset="1"/>
<GradientStop Color="#7FCDD9DC"/>
</LinearGradientBrush>
</Border.Background>
</Border>
<Image x:Name="image" Source="close.png" Stretch="None" VerticalAlignment="Center" HorizontalAlignment="Center" >
</Image>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I'm pretty sure I'm missing the problem of your question, but the following code works for me:
<Window.Resources>
<Image x:Key="test" Source="/Images/ChangeCase.png"/>
</Window.Resources>
<!-- Using a Resource for the Content -->
<Button Width="100" Height="20" Content="{StaticResource test}"/>
<!-- Specifying the Content directly -->
<Button Width="100" Height="20">
<Image Source="/Images/ChangeCase.png"/>
</Button>
Plus I spotted an error in your code:
<Button Content="{{StaticResource closeImage}" [...]
should be:
<Button Content="{StaticResource closeImage}" [...]
I don't quite understand what your style is doing. Why do you have the Content Property set to a StaticResource when you want to specify the image via style?
Edit:
Alright, I tried your style and it also works for me.
<Style x:Key="WindowToolboxButton" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid x:Name="grid" Height="15" Width="15">
<Border x:Name="border" CornerRadius="2,2,2,2" BorderBrush="#FFBBCDD2" BorderThickness="1" Opacity="0" Margin="0">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF82A3AC" Offset="1"/>
<GradientStop Color="#7FCDD9DC"/>
</LinearGradientBrush>
</Border.Background>
</Border>
<Image x:Name="image" Source="/Images/ChangeCase.png" Stretch="None" VerticalAlignment="Center" HorizontalAlignment="Center" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Button Width="100" Height="20" Content="Test" Style="{DynamicResource WindowToolboxButton}"/>
The image is shown. However, I can't see your border due to the opacity-prop being set to 0.
The content that is given directly on the button is overriden by the style.
Maybe there is sth wrong with your image? Did you set its build-property to Resource?
I think the correct way of doing this is
Create a new custom control ImageButton which derives from Button
Create a DP 'ImageSource' of type 'ImageSource' in ImageButton and in its style bind the Source of the Image to this DP.
Then you can use it like <ImageButton ImageSource={StaticResource ...}/>
If you try to add an image defined in a resource to a content control it will only work the first time. The second time you try to add the same image into another content control it will fail with "Specified visual is already a child of another visual..."
Actually, this is really easy. Use the Style you already have and add the following to 'image'
Source="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}"
Then (as long as you have the image set as Content/Copy if newer) you can set the Content with the desired image's Uri.
<Button Content="/[projectname];component/.../close.png" Style="{StaticResource WindowToolboxButton}" ... />
note: replace '[projectname]' with your project's name and the '...' with path to the image
Replace
<Image x:Name="image" Source="close.png" Stretch="None" VerticalAlignment="Center" HorizontalAlignment="Center" >
With
<Image x:Name="image" Source="{Binding Content, RelativeSource={RelativeSource AncestorType=Button}" Stretch="None" VerticalAlignment="Center" HorizontalAlignment="Center" >
Where your ancestor type will be That button that is called in xaml, and there you can Set Content of that button to point to some image.
Example:
<cc:customButton Content={StaticResource someImage}.../>
I'm trying to create a button that has an image in it and no border - just like the Firefox toolbar buttons before you hover over them and see the full button.
I've tried setting the BorderBrush to Transparent, BorderThickness to 0, and also tried BorderBrush="{x:Null}", but you can still see the outline of the button.
Try this
<Button BorderThickness="0"
Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" >...
You may have to change the button template, this will give you a button with no frame what so ever, but also without any press or disabled effect:
<Style x:Key="TransparentStyle" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="Transparent">
<ContentPresenter/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And the button:
<Button Style="{StaticResource TransparentStyle}"/>
What you have to do is something like this:
<Button Name="MyFlatImageButton"
Background="Transparent"
BorderBrush="Transparent"
BorderThickness="0"
Padding="-4">
<Image Source="MyImage.png"/>
</Button>
Hope this is what you were looking for.
Edit: Sorry, forgot to mention that if you want to see the button-border when you hover over the image, all you have to do is skip the Padding="-4".
I don't know why others haven't pointed out that this question is duplicated with this one with accepted answer.
I quote here the solution: You need to override the ControlTemplate of the Button:
<Button Content="save" Name="btnSaveEditedText"
Background="Transparent"
Foreground="White"
FontFamily="Tw Cen MT Condensed"
FontSize="30"
Margin="-280,0,0,10"
Width="60"
BorderBrush="Transparent"
BorderThickness="0">
<Button.Template>
<ControlTemplate TargetType="Button">
<ContentPresenter Content="{TemplateBinding Content}"/>
</ControlTemplate>
</Button.Template>
</Button>
You can use Hyperlink instead of Button, like this:
<TextBlock>
<Hyperlink TextDecorations="{x:Null}">
<Image Width="16"
Height="16"
Margin="3"
Source="/YourProjectName;component/Images/close-small.png" />
</Hyperlink>
</TextBlock>
You may already know that putting your Button inside of a ToolBar gives you this behavior, but if you want something that will work across ALL current themes with any sort of predictability, you'll need to create a new ControlTemplate.
Prashant's solution does not work with a Button not in a toolbar when the Button has focus. It also doesn't work 100% with the default theme in XP -- you can still see faint gray borders when your container Background is white.
Why don't you set both Background & BorderBrush by same brush
<Style TargetType="{x:Type Button}" >
<Setter Property="Background" Value="{StaticResource marginBackGround}"></Setter>
<Setter Property="BorderBrush" Value="{StaticResource marginBackGround}"></Setter>
</Style>
<LinearGradientBrush x:Key="marginBackGround" EndPoint=".5,1" StartPoint="0.5,0">
<GradientStop Color="#EE82EE" Offset="0"/>
<GradientStop Color="#7B30B6" Offset="0.5"/>
<GradientStop Color="#510088" Offset="0.5"/>
<GradientStop Color="#76209B" Offset="0.9"/>
<GradientStop Color="#C750B9" Offset="1"/>
</LinearGradientBrush>
Apparantly when users right-click in our WPF application, and they use the Windows Classic theme, the default ContextMenu of the TextBox (which contains Copy, Cut and Paste) has a black background.
I know this works well:
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<TextBox ContextMenu="{x:Null}"/>
</Page>
But this doesn't work:
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Page.Resources>
<Style x:Key="{x:Type TextBox}" TargetType="{x:Type TextBox}">
<Setter Property="ContextMenu" Value="{x:Null}"/>
</Style>
</Page.Resources>
<TextBox/>
</Page>
Does anyone know how to style or disable the default ContextMenu for all TextBoxes in WPF?
To style ContextMenu's for all TextBoxes, I would do something like the following:
First, in the resources section, add a ContextMenu which you plan to use as your standard ContextMenu in a textbox. e.g.
<ContextMenu x:Key="TextBoxContextMenu" Background="White">
<MenuItem Command="ApplicationCommands.Copy" />
<MenuItem Command="ApplicationCommands.Cut" />
<MenuItem Command="ApplicationCommands.Paste" />
</ContextMenu>
Secondly, create a style for your TextBoxes, which uses the context menu resource:
<Style TargetType="{x:Type TextBox}">
<Setter Property="ContextMenu" Value="{StaticResource TextBoxContextMenu}" />
</Style>
Finally, use your text box as normal:
<TextBox />
If instead you want to apply this context menu to only some of your textboxes, do not create the style above, and add the following to your TextBox markup:
<TextBox ContextMenu="{StaticResource TextBoxContextMenu}" />
Hope this helps!
Bizarre. ContextMenu="{x:Null}" doesn't do the trick.
This does, however:
<TextBox.ContextMenu>
<ContextMenu Visibility="Collapsed">
</ContextMenu>
</TextBox.ContextMenu>
Due to a late bug report we discovered that we cannot use the ApplicationComands Cut Paste and Copy directly in a partial trusted application. Therefor, using these commands in any Commmand of your controls will do absolutely nothing when executed.
So in essence Brads answer was almost there, it sure looked the right way i.e. no black background, but did not fix the problem.
We decided to "remove" the menu based on Brads answer, like so:
<ContextMenu x:Key="TextBoxContextMenu" Width="0" Height="0" />
And use this empty context menu like so:
<Style TargetType="{x:Type TextBox}">
<Setter Property="ContextMenu" Value="{StaticResource TextBoxContextMenu}" />
</Style>
Doesn't matter, if you do not provide a key, it will use the TargetType as key just the same way my example uses :)
Taken from MSDN on Style:
Setting the TargetType property to the TextBlock type without
setting an x:Key implicitly sets the x:Key to {x:Type TextBlock}. This also means that if you > > give the above Style an x:Key value of anything other than {x:Type TextBlock}, the Style
would not be applied to all TextBlock elements automatically. Instead,
you need to apply the style to the TextBlock elements explicitly.
http://msdn.microsoft.com/en-us/library/system.windows.style.targettype.aspx
This is way is what I always use:
<TextBox x:Name="MyTextbox">
<TextBox.ContextMenu>
<ContextMenu Visibility="Hidden"/>
</TextBox.ContextMenu>
</TextBox>
And also can use:
MyTextbox.ContextMenu.Visibility = Visibility.Hidden;
MyTextbox.ContextMenu.Visibility = Visibility.Visble;
Try removing the x:Key attribute from the Style resource, leaving TargetType. I know, you're supposed to have that x:Key for a resource, but if you have it along with your TargetType the Key prevails.
Here's a sample style that I use in a project to skin all tooltips in one of my apps (this is in App.Resources--notice, no Key)
<Style
TargetType="{x:Type ToolTip}">
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="{x:Type ToolTip}">
<Grid
Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}">
<Rectangle
RadiusX="9"
RadiusY="9"
Stroke="LightGray"
StrokeThickness="2">
<Rectangle.Fill>
<RadialGradientBrush>
<GradientStop />
<GradientStop
Color="FloralWhite"
Offset="0" />
<GradientStop
Color="Cornsilk"
Offset="2" />
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<ContentPresenter
Margin="6 4 6 4" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>