I have an image with a transparent background which I would like to overlay on my window as an image behind all of the controls.
My window background already has a gradient brush, but what I can tell by Googling and experimenting, you cannot have two background brushes.
Here is the XAML which isn't working. What do you suggest? Maybe there is another way of setting the image.
<Window.Background>
<LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
<GradientStop Color="#FFF7F7F7"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
<ImageBrush ImageSource="/Images/Arrow.png">
</ImageBrush>
</Window.Background>
You may put an Image control into a top-level Grid, below all other controls:
<Grid>
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
<GradientStop Color="#FFF7F7F7"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<Image Source="/Images/Arrow.png">
<Grid>
... all other controls go here
</Grid>
</Grid>
Related
I want to use LinearGradientBrush to horizontal fill my Rectangle on canvas.
My code:
<Rectangle Width="200" Height="200">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5" >
<GradientStop Color="Red" Offset="0" />
<GradientStop Color="Blue" Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
But I notice that the left-most color of red is not #FFFF0000, and it was #FFFE0000
So did anyone know why this happen?
Gradient is drawn using interpolation, so it tends to the color you choose but it does not need to draw it exactly. It also depends on the size of the element for which you use the gradient.
Workaround - set Offset property as below:
<Rectangle Width="200" Height="200">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStop Color="Red" Offset="0.01" />
<GradientStop Color="Blue" Offset="0.99"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
I have a Grid that I am essentially using as a button which I need to change the backcolor gradient to another gradient while the mouse button is down. When the mouse button is released, change it back to the original color. Additionally, I will need to perform some action as well. I am trying to accomplish this in the code behind but maybe this can be done in the xaml? I am going about it this way as customizing a button to the look and feel that I needed was proving to be more difficult. How can I go about this?
XAML:
<DockPanel LastChildFill="True" Width="40" Height="40" Margin="22,20,22,5">
<Border BorderThickness="0,1,0,0" DockPanel.Dock="Top" BorderBrush ="#747474" />
<Border BorderThickness="1,0,0,0" DockPanel.Dock="Left">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#747474" Offset="0"/>
<GradientStop Color="#464648" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
</Border>
<Border BorderThickness="0,0,1,0" DockPanel.Dock="Right">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#747474" Offset="0"/>
<GradientStop Color="#464648" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
</Border>
<Border BorderThickness="0,1,0,0" DockPanel.Dock="Bottom" BorderBrush ="#464648" />
<Grid Width="38" Height="38">
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#585858" Offset="0"/>
<GradientStop Color="#464648" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<Image HorizontalAlignment="Center" VerticalAlignment="Center" Source="/common/printer_20.png" Stretch="None" />
</Grid>
You have several ways to achieve this.
Use a Style and Visual States. Problem: It would be dirty executing a command.
Add a Behavior to the Grid. Assign the Mouse Events and change Background in code. Additionally you can execute a Command.
Use a Trigger to change the background. Use MVVM Light to execute a Command.
Which way would you prefer?
Is there any way without using image to show horizontal or vertical lines in the Rectangle.
Yes you can easily do this with a LinearGradientBrush:
<Rectangle Width="100" Height="100">
<Rectangle.Fill>
<LinearGradientBrush SpreadMethod="Reflect" StartPoint="0 0" EndPoint="0 0.05">
<GradientStop Offset="0.5" Color="Black"/>
<GradientStop Offset="0.5" Color="White"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
You control line thickness and orientation with the EndPoint property.
I'm trying to make a stylish progress bar, but I'm having a problem with its vertical version. A picture is worth a thousand words:
http://img402.imageshack.us/img402/2033/progressq.gif
Everything I've attempted so far has resulted in Wrong. How do I achieve Right? I'd prefer a XAML only solution unless it's slow or causes flickering when the progress bar is updated many times per second.
Here's one alternative:
<Border BorderBrush="Black" BorderThickness="2" CornerRadius="3" Padding="3">
<Grid Width="20" Height="100">
<Grid Height="{Binding ProgressValue}" VerticalAlignment="Bottom">
<Grid Height="100" VerticalAlignment="Bottom">
<Grid.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="Yellow" Offset="0.0" />
<GradientStop Color="Red" Offset="0.25" />
<GradientStop Color="Blue" Offset="0.75" />
<GradientStop Color="LimeGreen" Offset="1.0" />
</LinearGradientBrush>
</Grid.Background>
</Grid>
</Grid>
</Grid>
</Border>
Note the third line from the top, that is where you bind your progress value.
I have application where default Window's borders switched off
Window tag definition looks like this:
<Window x:Class="TEA.UI.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Title" WindowStyle="None" AllowsTransparency="True" Background="Transparent">
Inside Window tag, there is Grid panel, it contains several Rectangle shapes and few other grids.
It looks like this:
<Grid>
<!-- WINDOW BACKGROUND -->
<Rectangle Stroke="#FF214E80" RadiusX="3" RadiusY="3" ClipToBounds="True">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF193C6C" Offset="0"/>
<GradientStop Color="#FF2A65A4" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<!-- // WINDOW BACKGROUND -->
<!-- HEADER HIGHLIGHT2 -->
<Rectangle HorizontalAlignment="Stretch" Margin="2,2,2,0" VerticalAlignment="Top" Height="62" RadiusX="2" RadiusY="2">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#00193C6C" Offset="1"/>
<GradientStop Color="#4C96ABC3" Offset="0"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<!-- // HEADER HIGHLIGHT2 -->
<Grid>
....
</Grid>
These rectangle shapes are used in other window dialogs as well.
My questions are:
How would it be possible to store these recatangles inside WPF resource dictionary?
How would I be able to reference them?
Actually the solution was quite simple
WPF UserControl did the trick for me
You can create a style in your resource dictionary for these items with setters for each property--one included below.
<Style TargetType="{x:Type Rectangle}" x:Key="WindowBackground">
<Setter Property="Stroke" Value="#FF214E80"/>
</Style>
Then in your window you can reference the style as such..
<Rectangle Style="{StaticResource WindowBackground}"/>