I am trying to access an app resource from my resources like this:
LinearGradientBrush lb = Application.Current.Resources["FFG"] as LinearGradientBrush;
However, this throws a NullReferenceException. I tried this code to see what was null:
Debug.WriteLine(this.Resources.Count());
Also returned a NullReferenceException.
What's even stranger is that this works:
(Storyboard)this.Resources["LayersOut"]).Begin();
Can this.Resources possibly be null, even when I have all of this in the resources area of the XAML?
Note that my code above is ran after InitializeComponent();
(Removed all of the storyboards for ease of reading)
<phone:PhoneApplicationPage.Resources>
<LinearGradientBrush x:Key="PrecipBrush" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF490000" Offset="0"/>
<GradientStop Color="#FFE8E8E8" Offset="1"/>
<GradientStop Color="#FF2044E4" Offset="0.838"/>
<GradientStop Color="#FF17A598" Offset="0.653"/>
<GradientStop Color="#FF22BB00" Offset="0.445"/>
<GradientStop Color="#FFFFE800" Offset="0.253"/>
<GradientStop Color="#FFFF0202" Offset="0.125"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="MRMS" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Red" Offset="0"/>
<GradientStop Color="#FFAB59FD" Offset="1"/>
<GradientStop Color="#FF2044E4" Offset="0.838"/>
<GradientStop Color="#FF17A598" Offset="0.653"/>
<GradientStop Color="#FF22BB00" Offset="0.445"/>
<GradientStop Color="#FF005D00" Offset="0.253"/>
<GradientStop Color="Yellow" Offset="0.125"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="FFG" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF460055" Offset="0"/>
<GradientStop Color="#FF23FF00" Offset="1"/>
<GradientStop Color="Yellow" Offset="0.815"/>
<GradientStop Color="Magenta" Offset="0.253"/>
<GradientStop Color="#FFB400A3" Offset="0.125"/>
<GradientStop Color="#FFB69D00" Offset="0.642"/>
<GradientStop Color="#FFB60000" Offset="0.43"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DroughtKey" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF490000" Offset="0"/>
<GradientStop Color="#FFFFD100" Offset="1"/>
<GradientStop Color="#FFB67C00" Offset="0.653"/>
<GradientStop Color="#FF746400" Offset="0.445"/>
<GradientStop Color="Red" Offset="0.253"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ForestFire" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF490000" Offset="0"/>
<GradientStop Color="#FFFFD100" Offset="1"/>
<GradientStop Color="Red" Offset="0.253"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="QPF" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Red" Offset="0"/>
<GradientStop Color="#FF68FF00" Offset="1"/>
<GradientStop Color="#FF28B000" Offset="0.838"/>
<GradientStop Color="#FF0800BB" Offset="0.445"/>
<GradientStop Color="#FF00FFD1" Offset="0.253"/>
<GradientStop Color="#FFDC00FF" Offset="0.125"/>
<GradientStop Color="#FF126300" Offset="0.626"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="Temp" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Red" Offset="0"/>
<GradientStop Color="#FF070097" Offset="1"/>
<GradientStop Color="#FF035FFF" Offset="0.838"/>
<GradientStop Color="#FF23FF00" Offset="0.445"/>
<GradientStop Color="Yellow" Offset="0.253"/>
<GradientStop Color="#FFFF5D00" Offset="0.125"/>
<GradientStop Color="#FF00FFF3" Offset="0.626"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="PrecipAvg" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF661C00" Offset="0"/>
<GradientStop Color="#FF17A600" Offset="1"/>
<GradientStop Color="#FF26EC4A" Offset="0.838"/>
<GradientStop Color="#FFDCFF00" Offset="0.445"/>
<GradientStop Color="#FFFF8000" Offset="0.253"/>
<GradientStop Color="#FF9B3800" Offset="0.125"/>
<GradientStop Color="#FF65E040" Offset="0.626"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="PrecipHour" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF661C00" Offset="0"/>
<GradientStop Color="#FF0011BF" Offset="1"/>
<GradientStop Color="#FF265CEC" Offset="0.838"/>
<GradientStop Color="#FF2EFF00" Offset="0.445"/>
<GradientStop Color="#FFF3FF00" Offset="0.253"/>
<GradientStop Color="Red" Offset="0.125"/>
<GradientStop Color="#FF65E040" Offset="0.626"/>
</LinearGradientBrush>
</phone:PhoneApplicationPage.Resources>
Application.Current.Resources refers to the resources defined in App.xaml, not the current page. Try accessing this way in the code behind:
LinearGradientBrush lb = this.Resources["FFG"] as LinearGradientBrush;
or move the brush definition on App.xaml and then your code should work too:
LinearGradientBrush lb = Application.Current.Resources["FFG"] as LinearGradientBrush;
You need to write the following code in your App.xaml:
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Path to your resource file" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
Then you'll can get it like this:
LinearGradientBrush lb = Application.Current.Resources["FFG"] as LinearGradientBrush;
Related
I'm trying to create a stylish effect in my app that allows an image to sit in the top right hand corner with the left and bottom edges merging into the background colour using Image.OpacityMask. Something like:
This could be done using the following code, except Image.OpacityMask only allows for one child LinearGradientBrush:
<Image Source="Images/poster.jpg" Width="300">
<Image.OpacityMask>
<LinearGradientBrush StartPoint="1, 0.5" EndPoint="0, 0.5">
<GradientStop Color="Black" Offset="0.2" />
<GradientStop Color="Transparent" Offset="1.0" />
</LinearGradientBrush>
<LinearGradientBrush StartPoint="0.5, 0" EndPoint="0.5, 1">
<GradientStop Color="Black" Offset="0.2" />
<GradientStop Color="Transparent" Offset="1.0" />
</LinearGradientBrush>
</Image.OpacityMask>
</Image>
How can I create an Image.OpacityMask like this with valid code? I'm aware that there is a RadialGradientBrush, but this would blend the whole image, not just the left and bottom edges.
You could use two elements, e.g. an Image in a Border:
<Border HorizontalAlignment="Right" VerticalAlignment="Top" Width="300">
<Border.OpacityMask>
<LinearGradientBrush StartPoint="1, 0.5" EndPoint="0, 0.5">
<GradientStop Color="Black" Offset="0.2" />
<GradientStop Color="Transparent" Offset="1.0" />
</LinearGradientBrush>
</Border.OpacityMask>
<Image Source="Images/poster.jpg">
<Image.OpacityMask>
<LinearGradientBrush StartPoint="0.5, 0" EndPoint="0.5, 1">
<GradientStop Color="Black" Offset="0.2" />
<GradientStop Color="Transparent" Offset="1.0" />
</LinearGradientBrush>
</Image.OpacityMask>
</Image>
</Border>
I have textblock like this
<TextBlock Text="BETA"
FontSize="28"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Margin="0,17,420,271"
FontFamily="Georgia">
<TextBlock.RenderTransform>
<RotateTransform Angle="20" />
</TextBlock.RenderTransform>
<TextBlock.Foreground>
<LinearGradientBrush StartPoint="0,0"
EndPoint="0,24"
MappingMode="Absolute">
<GradientStopCollection>
<GradientStop Color="White"
Offset="0" />
<GradientStop Color="Orange"
Offset=".2" />
<GradientStop Color="DarkOrange"
Offset=".85" />
<GradientStop Color="White"
Offset="1" />
</GradientStopCollection>
</LinearGradientBrush>
</TextBlock.Foreground>
</TextBlock>
It won't render any text. If I remove the transform OR the brush then it works fine but both together won't render anything.
Removing Absolute as the mapping mode fixed my issue? Not sure why.
I have Image.
I want make blur edge for Image.
I can add on Image.OpacityMask only one LinearGradientBrush and make only Horizontal or only Vertical blurred edge:
<Image Height="300" Width="450" Name="oldImg" Source="/untitled.jpg">
<Image.OpacityMask>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="Transparent"></GradientStop>
<GradientStop Offset=".3" Color="Black"></GradientStop>
<GradientStop Offset=".7" Color="Black"></GradientStop>
<GradientStop Offset="1" Color="Transparent"></GradientStop>
</LinearGradientBrush>
</Image.OpacityMask>
</Image>
How to combine vertical and horizontal lineargradientbrush?
One way would be to stack two rectangles on top of the image ...
<Grid>
<Image Height="300" Width="450" Name="oldImg" Source="/untitled.jpg"></Image>
<Rectangle >
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="White"></GradientStop>
<GradientStop Offset=".3" Color="Transparent"></GradientStop>
<GradientStop Offset=".7" Color="Transparent"></GradientStop>
<GradientStop Offset="1" Color="White"></GradientStop>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle>
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<GradientStop Offset="0" Color="White"></GradientStop>
<GradientStop Offset=".3" Color="Transparent"></GradientStop>
<GradientStop Offset=".7" Color="Transparent"></GradientStop>
<GradientStop Offset="1" Color="White"></GradientStop>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
I don't think you can apply multiple brushes within a fill / mask.
I haven't been able to get this to work, but this is what I envision:
Essentially, I want to have a control in WPF where the background is set to a left aligned image with an opacity mask that fades the right side of the image out into transparency (so that the parent's background color shows through)
Is this type of thing possible? Here's what I've tried:
<DockPanel x:Name="ContentPanel" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<DockPanel.Background>
<ImageBrush ImageSource="test.jpg" Stretch="None" AlignmentX="Left" AlignmentY="Center" />
</DockPanel.Background>
<DockPanel.OpacityMask>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="White" Offset="0.5"/>
</LinearGradientBrush>
</DockPanel.OpacityMask>
</DockPanel>
This example should get you started.
<Grid>
<Grid.Resources>
<Image x:Key="myImage" Source="test.jpg">
<Image.OpacityMask>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5" >
<GradientStop Offset="0.0" Color="#00000000" />
<GradientStop Offset="1.0" Color="#FF000000" />
</LinearGradientBrush>
</Image.OpacityMask>
</Image>
<VisualBrush x:Key="myBrush" Visual="{StaticResource myImage}"/>
</Grid.Resources>
<DockPanel x:Name="ContentPanel" Width="550"
HorizontalAlignment="Left"
Background="{StaticResource myBrush}"/>
</Grid>
You could also use a partially transparent bitmap (png). That way you can have more complex transparency effects than just a gradient.
Like this: (replace the underlying rectangle with any image u want)
<Grid x:Name="LayoutRoot">
<Rectangle Margin="187,91,147,101" Stroke="Black">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle Margin="254,164,196,158" Stroke="Black" Fill="Red">
<Rectangle.OpacityMask>
<LinearGradientBrush EndPoint="1,0" StartPoint="0,0">
<GradientStop Color="#00000000"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Rectangle.OpacityMask>
</Rectangle>
</Grid>
I've made a gradient that I quite like in expression blend, and I'm trying to work out if I can make the gradient curve around a corner, to give me a rounded border effect with the gradient.
The problem is that I can't use a normal border, because the gradient wont be consistent.
I came up with the following which should help demonstrate what I'm thinking:
rounded corner with gradient http://img232.imageshack.us/img232/9899/roundedcornerrg0.th.jpg
<Grid x:Name="grid" >
<Border
BorderThickness="0,0,40,40"
CornerRadius="0,0,40,0"
Padding="2" Height="60" VerticalAlignment="Bottom" Width="65" HorizontalAlignment="Right" >
<Border.BorderBrush>
<RadialGradientBrush>
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.058" ScaleY="2.177"/>
<SkewTransform AngleX="0" AngleY="0" CenterX="0.5" CenterY="0.5"/>
<RotateTransform Angle="-119.481" CenterX="0.5" CenterY="0.5"/>
<TranslateTransform X="0.209" Y="0.52"/>
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#FF000000" Offset="0"/>
<GradientStop Color="#000A0A0A" Offset="1"/>
<GradientStop Color="#6B050505" Offset="0.829"/>
<GradientStop Color="#BB020202" Offset="0.763"/>
</RadialGradientBrush>
</Border.BorderBrush>
</Border>
<Rectangle VerticalAlignment="Stretch" Height="100" Width="40" HorizontalAlignment="Right" Margin="0,0,0,60" StrokeThickness="0" Panel.ZIndex="0">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="-0.025,0.5" StartPoint="1,0.5">
<GradientStop Color="#FF000000" Offset="0"/>
<GradientStop Color="#000A0A0A" Offset="1"/>
<GradientStop Color="#6B050505" Offset="0.829"/>
<GradientStop Color="#BB020202" Offset="0.763"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle VerticalAlignment="Bottom" Height="40" Width="100" HorizontalAlignment="Stretch" Margin="0,0,65,0">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,0" StartPoint="0.5,1">
<GradientStop Color="#FF000000" Offset="0"/>
<GradientStop Color="#000A0A0A" Offset="1"/>
<GradientStop Color="#6B050505" Offset="0.829"/>
<GradientStop Color="#BB020202" Offset="0.763"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
Is there any way to get a gradient bending around a corner like I'm thinking? I saw a suggestion online to nest borders in each other, but this is no good for me either, as the gradient makes life difficult.
You might want to check out Charles Petzolds article on Graphical Paths with Gradient Colors in which he discusses a similar problem to yours.
<Grid x:Name="grid" VerticalAlignment="Top" HorizontalAlignment="Left" Width="100" Height="100" Margin="200,200,0,0">
<Rectangle VerticalAlignment="Stretch" Width="20" HorizontalAlignment="Right" Margin="0,20,0,20" StrokeThickness="0" Panel.ZIndex="0">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="1,0" StartPoint="0,0">
<GradientStop Color="#00FFFFFF" Offset="0"/>
<GradientStop Color="#FFFFFFFF" Offset="1"/>
<GradientStop Color="#22FFFFFF" Offset="0.5"/>
<GradientStop Color="#11FFFFFF" Offset="0.3"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle VerticalAlignment="Bottom" Height="20" HorizontalAlignment="Stretch" Margin="20,0,20,0">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="1,1" StartPoint="1,0">
<GradientStop Color="#00FFFFFF" Offset="0"/>
<GradientStop Color="#FFFFFFFF" Offset="1"/>
<GradientStop Color="#22FFFFFF" Offset="0.5"/>
<GradientStop Color="#11FFFFFF" Offset="0.3"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle VerticalAlignment="Stretch" Width="20" HorizontalAlignment="Left" Margin="0,20,0,20" StrokeThickness="0" Panel.ZIndex="0">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0,0" StartPoint="1,0">
<GradientStop Color="#00FFFFFF" Offset="0"/>
<GradientStop Color="#FFFFFFFF" Offset="1"/>
<GradientStop Color="#22FFFFFF" Offset="0.5"/>
<GradientStop Color="#11FFFFFF" Offset="0.3"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle VerticalAlignment="Top" Height="20" HorizontalAlignment="Stretch" Margin="20,0,20,0">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="1,0" StartPoint="1,1">
<GradientStop Color="#00FFFFFF" Offset="0"/>
<GradientStop Color="#FFFFFFFF" Offset="1"/>
<GradientStop Color="#22FFFFFF" Offset="0.5"/>
<GradientStop Color="#11FFFFFF" Offset="0.3"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle VerticalAlignment="Top" Height="20" Width="20" HorizontalAlignment="Left" Margin="0,0,0,0">
<Rectangle.Fill>
<RadialGradientBrush Center=".9,.9" GradientOrigin="1,1" RadiusX=".85" RadiusY=".85">
<GradientStop Color="#00FFFFFF" Offset="0"/>
<GradientStop Color="#FFFFFFFF" Offset="1"/>
<GradientStop Color="#22FFFFFF" Offset="0.5"/>
<GradientStop Color="#11FFFFFF" Offset="0.3"/>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle VerticalAlignment="Bottom" Height="20" Width="20" HorizontalAlignment="Right" Margin="0,0,0,0">
<Rectangle.Fill>
<RadialGradientBrush Center=".1,.1" GradientOrigin="0,0" RadiusX=".85" RadiusY=".85">
<GradientStop Color="#00FFFFFF" Offset="0"/>
<GradientStop Color="#FFFFFFFF" Offset="1"/>
<GradientStop Color="#22FFFFFF" Offset="0.5"/>
<GradientStop Color="#11FFFFFF" Offset="0.3"/>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle VerticalAlignment="Top" Height="20" Width="20" HorizontalAlignment="Right" Margin="0,0,0,0">
<Rectangle.Fill>
<RadialGradientBrush Center=".1,.9" GradientOrigin="0,1" RadiusX=".85" RadiusY=".85">
<GradientStop Color="#00FFFFFF" Offset="0"/>
<GradientStop Color="#FFFFFFFF" Offset="1"/>
<GradientStop Color="#22FFFFFF" Offset="0.5"/>
<GradientStop Color="#11FFFFFF" Offset="0.3"/>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle VerticalAlignment="Bottom" Height="20" Width="20" HorizontalAlignment="Left" Margin="0,0,0,0">
<Rectangle.Fill>
<RadialGradientBrush Center=".9,.1" GradientOrigin="1,0" RadiusX=".85" RadiusY=".85">
<GradientStop Color="#00FFFFFF" Offset="0"/>
<GradientStop Color="#FFFFFFFF" Offset="1"/>
<GradientStop Color="#22FFFFFF" Offset="0.5"/>
<GradientStop Color="#11FFFFFF" Offset="0.3"/>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>