I have two ToolBars side by side (I had to do that so I could align buttons right and left)
But now, I have to add some text that can be aligned right left or center between both toolbars. I added the text in a TextBlock inside a StackPanel disposed on a Grid at the second position (between the toolbars) and, of course, it created a gap between both toolbars (A stackPanel doesn't have the same style as a toolbar, of course).
I would like to replicate the toolbar LinearGradientBrush on my stackpanel so it looks the same as my toolbar does. the point is to make the thing look like ONE toolbar.
Is there a way to get the ToolBar Style or to recreate it with a LinearGradientBrush definition, and if so, how?
Here's one way you could do it. Say one of your toolbars' name is "toolBar." Bind the Background property on the StackPanel to the Background property on the ToolBar as such:
<StackPanel Background="{Binding Path=Background, ElementName=toolBar}" />
Hope that helps! :)
EDIT:
You can check out the control template for the ToolBar here.
The LinearGradientBrush used looks as such:
<LinearGradientBrush x:Key="DarkBrush" StartPoint="0,0" EndPoint="0,1">
<GradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#FFF" Offset="0.0"/>
<GradientStop Color="#AAA" Offset="1.0"/>
</GradientStopCollection>
</GradientBrush.GradientStops>
</LinearGradientBrush>
In the event you just wanted to use this instead of binding. :)
The default templates and styles are available on MSDN, you could probably extract the relevant bits from there.
I found an issue when doing this exact same thing in an application. When running the same application on an XP machine as I did a Vista machine, I found that there was a 2 pixel difference in the height between the two toolbars.
To get around this, I ended up creating one StackPanel which housed the two tool bar objects (setting the background to be transparent).
This ensured that the look and feel was the same between the two OS's (at the time the company was running both) and will also aid you in the event that one of your toolbars grow in height without the other.
Related
This is a very annoying artifact I am noticing of WPF and I was curious what I could potentially be doing wrong as I am doing what appears to be simple code in WPF XAML:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="ExampleShapes.MainWindow"
x:Name="Window"
Title="MainWindow"
Width="400" Height="400">
<Grid x:Name="LayoutRoot">
<Button Margin="50,50,50,50" Content="I pulse when clicked Why?">
<Button.Background>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FF0C0B0B" Offset="1"/>
<GradientStop Color="#FFBF5656"/>
</LinearGradientBrush>
</Button.Background>
</Button>
</Grid>
It appears that there are some defaults that are in .NET that I am unaware of with events of the MouseOver and Click that I DO NOT WANT. I don't mind that when the mouse hovers that it changes the color of the gradient to the default but when I remove it it changes back. However even before applying underlying C# code for the 'CLICK' event (not in example) it assumes a 'pulsing' behavior of going between my specified gradient and the default. This is also true with a simple color. What gives?
For further info I am designing on a Windows 7 64 bit box with Visual Studio 2010 and Expression Blend 3 using .NET 4.0 for VS2010 unsure for EB3 as it's an older copy and they Both do this. Is there a simple way to change the default behavior or do I have to set up a new user template for the button?
Any help is much appreciated thanks!
It appears to have something to do with the Focused style for the Button. I am guessing the default focused style alternates between the normal and mouseover backgrounds, which is causing the "pulsing" behavior.
Clicking the button sets it as focused, but you can also achieve the same effect by simply tabbing to the button.
Edit
Looking into this a bit more and it seems to be the default for the Aero theme for any element that has input focus. You can set the button's Focusable="False", however then you can't tab to the button or hit Enter on it (can still click it though), and personally I hate applications that I can't navigate with the keyboard.
To avoid the flashing when clicked, you can set focus to another control at the end of your click event, however the effect will still occur when you tab to the button.
I want to be able to see a drop shadow, but not the object that is creating the drop shadow.
The code below will only work if I give the ellipse a fill colour.
<Ellipse Width="640" Height="640">
<Ellipse.Effect>
<DropShadowEffect Color="Cyan" BlurRadius="60" />
</Ellipse.Effect>
</Ellipse>
This makes sence as an invisible object wouldn't have a shadow. But, what if I really wanted it to? Is there a way to make this happen?
Are you looking for this? Or are you expecting the entire shadow to appear? If later, did you try making the ellipse transparent by setting the alpha value to zero?
I want to create an area in my application that looks draggable. Usually, you see this done with a background of small dots or squares, or sometimes lines. I'm using Silverlight and I want to simply create a background that is a set of repeating small rectangles. I honestly cannot figure out how to generate a background with xaml. I'd rather not have to create every little rectangle -- this will also cause the control not to scale. Is there some way to repeat xaml elements to form a pattern? This would be similar to CSS repeating backgrounds, but I would like to use xaml instead of images.
You can use a brush, like this:
<Rectangle>
<Rectangle.Fill>
<LinearGradientBrush EndPoint="6,6" StartPoint="2,2" SpreadMethod="Repeat" MappingMode="Absolute">
<GradientStop Color="#FFAFAFAF" Offset="0"/>
<GradientStop Color="#00FFFFFF" Offset="1"/>
<GradientStop Color="#00FFFFFF" Offset="0.339"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
I've nicked this particular example from the excellent blacklight project, you'll need to play around with all the different settings to see what does what. I'm guessing a radial brush will allow you to get dots, etc. I think they created it in blend as all the numbers were crazy decimals until I sanitised them a bit.
I'm using the M-V-VM pattern in WPF and I have a background brush I'm going to be using rather often and I'd like to move it out in to a shared ResourceDictionary.
The only problem is the brush uses a color which it gets via Databinding to its hosted context.
Is there anyway I can move the brush out in to a ResourceDictionary and still have it find the value it needs?
The Brush:
<RadialGradientBrush>
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterX="0.5"
CenterY="0.5"
ScaleX="2.3"
ScaleY="2.3" />
<TranslateTransform X="-0.3"
Y="-0.3" />
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="{Binding Path=BackdropColor}"
Offset="1.2" />
<GradientStop Color="#FFFFFFFF"
Offset="-0.1" />
</RadialGradientBrush>
After re-factoring it out to a ResourceDictionary and adding a key, I called it as such:
<StackPanel Grid.Row="0"
Margin="0,0,0,0"
Orientation="Horizontal"
Background="{DynamicResource BackdropRadGradBrush}">
But this resulted in this output in the debugger:
System.Windows.Data Error: 2 : Cannot find governing FrameworkElement or FrameworkContentElement for target element. BindingExpression:Path=BackdropColor; DataItem=null; target element is 'GradientStop' (HashCode=16001149); target property is 'Color' (type 'Color')
I don't think that you can keep this Brush in your resource dictionary and use binding to pull in the color. Since the brush is only created once (which is why you want it in the resource dictionary in the first place), at the time of creation WPF doesn't know where it will be used, so it can't pull in the value for the color.
If the color were kept in Setings, for example, that would probably work - but I'm guessing that won't help you, because you probably want the color to change on each control that it is used on (otherwise, you could just hard code the color or it would already be in settings).
Maybe you could create a RadialGradientBrush subclass, and expose the first GradientStop color as a DependencyProperty? You could then create an instance of this subclass wherever you need it, and use binding to pull in the correct color there.
This is a little late, but take a look at using a StaticResource or a DynamicResource instead of a Binding - it will allow you to access another Resource. Not quite Binding, but it's better than nothing.
I fill my datagrid in code behind like this:
var customers = from c in _db.Customers
select c;
TheDataGrid.ItemsSource = customers.ToList();
In my XAML below, the DataGrid.RowBackground works but the DataGridHeaderBorder gets the error "The Items listing must be empty before the use of ItemsSource" in the code-behind upon runtime.
This is odd because I'm just trying to change the color of the Datagrid headers and it gets a problem with ItemsSource. If I take the DataGridHeaderBorder line out, it works fine.
So how does one simply change the color of the column headers on a Datagrid?
<toolkit:DataGridHeaderBorder Background="yellow"/>
<toolkit:DataGrid.RowBackground>
<LinearGradientBrush EndPoint="-0.136,-0.163" StartPoint="1.291,1.248">
<GradientStop Color="#FFA8A929" Offset="0.004"/>
<GradientStop Color="#FFF7F7ED" Offset="0.991"/>
</LinearGradientBrush>
</toolkit:DataGrid.RowBackground>
Any time that you put elements within elements, the XAML parser has to decide if the sub-elements are complex property assignments (as you are trying to do), or whether you intend the sub-elements to be the "content" of the parent element. Because your problem "DataGridHeaderBorder" tag does not start with "toolkit:DataGrid", it is assumed that you are trying to set the DataGrid's content property (which happens to be Items) to this value.
I am not in a position to try this, but I would guess you'd need to replace the problem tag with something like:
<toolkit:DataGrid.RowHeaderStyle>
<Style TargetType="{x:Type toolkit:DataGridRowHeader}">
<Setter Property="Background" Value="Yellow" />
</Style>
</toolkit:DataGrid.RowHeaderStyle>