Anyone here who has the style of the Outlook 2007 'gradient' like in the following screenshot (the container where the 'Deleted Items' is placed'):
This could simply be a TextBox whose background is styled as follows:
<TextBox Text="Deleted Items" FontWeight="Bold" Foreground="#0080FF" Height="20" Width="150">
<TextBox.Background>
<LinearGradientBrush StartPoint="0.5 0" EndPoint="0.5 1">
<GradientStop Color="#EFF8FB" Offset="0"/>
<GradientStop Color="#A9E2F3" Offset="1"/>
</LinearGradientBrush>
</TextBox.Background>
</TextBox>
This could of course become a Style and placed int the UserControl.Resources, Page.Resources or Window.Resources section of your view.
Related
I have two solutions targeting the same 4.5 framework. Both projects uses the same version of dlls. But one is showing a progressbar without any effect. I just copied and pasted the code from one to another. One is with glossy effect and having animations in it but another is just static. What's wrong with it?
<ProgressBar HorizontalAlignment="Left" Height="30" Margin="3,0,0,0" Foreground="#FF007B00" Grid.Column="1" VerticalAlignment="Center" Width="176" Opacity="0.9" BorderThickness="0" Value="80">
<ProgressBar.Background>
<LinearGradientBrush EndPoint="1,0" StartPoint="0,0">
<GradientStop Color="#FFBABABA" Offset="0"/>
<GradientStop Color="#FFC7C7C7" Offset="0.014"/>
<GradientStop Color="#FFE63B09" Offset="1"/>
</LinearGradientBrush>
</ProgressBar.Background>
</ProgressBar>
How can I make a vertical Line (Path) whose height adjusts with its container? If the horizontal StackPanel height changes (see code below), I want the vertical Line (Path) to adjust its height so that it stretches always the top and bottom of its containing StackPanel.
<StackPanel Orientation="Horizontal">
<StackPanel Orientation="Vertical">
</StackPanel>
<Path Data="M280,0 L280,300" Stretch="Uniform" Fill="#FFE45737" Margin="50,0,0,0" Width="2">
<Path.Stroke>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Offset="0" Color="#0C9D9D9D"/>
<GradientStop Offset="0.996" Color="#0C9D9D9D"/>
<GradientStop Color="#FF9D9D9D" Offset="0.25"/>
<GradientStop Color="#FF9D9D9D" Offset="0.75"/>
</LinearGradientBrush>
</Path.Stroke>
</Path>
</StackPanel>
With this code, the Path sticks with fixed height there although StackPanel height changes.
I do not understand clearly what you want but Path in <ViewBox></Viewbox>. Let me know it is what you want or add more information.
The standard RadioButton does not support setting the color of the ellipse. So, I took a radiobutton template from this location as a basis for a custom RadioButton:
RadioButton Styles and Templates
<Ellipse.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="{DynamicResource ControlLightColor}" />
<GradientStop Color="{DynamicResource ControlMediumColor}" Offset="1.0" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
ControlLightColor and ControlMediumColor are defined as:
<Color x:Key="ControlLightColor">#ffff9a</Color>
<Color x:Key="ControlMediumColor">#ffff9a</Color>
Which gives us a yellow-ish ellipse.
How can I alter this color in the codebehind?
Regards,
Michel
Create a style by following this:
Creating a Style in code behind
then assign it to your element.Style
You can also access resources by
Resources["mykey"]
Solution:
<Ellipse x:Name="Border" StrokeThickness="1" Fill="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}, Path=DataContext.RadioButtonColor}">
Public ReadOnly Property RadioButtonColor() As SolidColorBrush
Get
Dim solidColorBrush As SolidColorBrush
If MyBusinessLogic Then
solidColorBrush = _radioButtonNotRequiredBrush
Else
solidColorBrush = _radioButtonRequiredBrush
End If
Return solidColorBrush
End Get
End Property
Thumbs up for JRB for thinking along.
How can I create a WPF control (similar to a TextBlock) so that any overflowing text is faded out to transparent rather than simply clipping or wrapping?
I need to keep my control fixed-width, so expanding the width of the control to fit the text is not an option. I also do not want to make the text font smaller.
Not quite sure exactly what you are trying to achieve, but you could do something like this:
<TextBlock Text="Some long text here that should fade out">
<TextBlock.Foreground>
<LinearGradientBrush>
<GradientStop Offset="0" Color="Black"/>
<GradientStop Offset="0.7" Color="Black"/>
<GradientStop Offset="1" Color="Transparent"/>
</LinearGradientBrush>
</TextBlock.Foreground>
</TextBlock>
But your control still needs to be wide enough to accommodate all the text for it to display.
<TextBlock Text="fgdfgfdgfddgfdgdfgfdgfdgd" Width="129" TextWrapping="NoWrap">
<TextBlock.Foreground>
<LinearGradientBrush EndPoint="0.661,0.399" StartPoint="0.008,0.496">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="#7F000000" Offset="0.803"/>
<GradientStop Color="#4C0A0909" Offset="0.95"/>
<GradientStop Color="#BF000000" Offset="0.729"/>
<GradientStop Color="#F8000000" Offset="0.699"/>
</LinearGradientBrush>
</TextBlock.Foreground>
</TextBlock>
The trick on the gradient is that even though all colors are all based off black, The fade is achieved through opacity of each gradient by playing with A part of RGBA, in pseudo-code:
GradientStop Color="Black" A=100%
GradientStop Color="Black" A=97% Offset="0.803"
GradientStop Color="Black" A=75% Offset="0.95"
GradientStop Color="Black" A=80% Offset="0.729"
GradientStop Color="Black" A=30% Offset="0.699"
Thanks guys, but I found the answer I needed on MSDN.
All i am trying to do create rectangles with radial corners and content within them. Content can be any image, textual data or multimedia something like http://www.spicynodes.org/. so
How do I create that rectangle ( can i have xaml markup)
Can i have arrows from one rectangle to another if so how?
the nearest I got to was below but unable to add text data
<Grid Name="containerPanel" Width="800" Height="500" Background="AntiqueWhite" VerticalAlignment="Center" HorizontalAlignment="Center">
<Rectangle Name="centerNode" Width="300" Height="150" RadiusX="12" RadiusY="12" VerticalAlignment="Center">
<Rectangle.Effect>
<DropShadowEffect ShadowDepth="3" BlurRadius="2" Color="Black"></DropShadowEffect>
</Rectangle.Effect>
<Rectangle.Stroke>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="Gray" Offset="0.1"></GradientStop>
<GradientStop Color="Beige" Offset="0.2"></GradientStop>
</LinearGradientBrush>
</Rectangle.Stroke>
<Rectangle.StrokeThickness>
2
</Rectangle.StrokeThickness>
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStop Color="AliceBlue" Offset="0.4" />
<GradientStop Color="White" Offset="1.0" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
Instead of using a Rectangle, you might want to use a container control. Assuming the content of your will consist of one element (i.e.: Either an image, either a textblock, either a ....), the first thing that comes to mind would be to use a Border, which will accept exactly one child element as its content:
<Border Width="300" Height="200" BorderBrush="Green" BorderThickness="5" CornerRadius="10">
<Border.Effect>
<DropShadowEffect ShadowDepth="5"/>
</Border.Effect>
<TextBlock Text="Inside the bounding box" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
As for the arrows going from one box to another:
Of course it's possible, but you will have to "connect" them manually. There's no out-of-the-box "connect and draw an arrow between these two elements" functionality.
Why not use a container like another grid, style it as you prefer, then add an image or textblock element inside it instead of a rectangle?