Imagine I have this brush:
<SolidColorBrush x:Key="MySolidDarkBackground" Color="{DynamicResource DarkBackgroundColorTop}" />
How can I use this brush for a scrollviewer background but with a different opacity?
<ScrollViewer VerticalScrollBarVisibility="Auto" Grid.Row="1">
<ScrollViewer.Background>
< ??? >
</ScrollViewer.Background>
</ScrollViewer>
You'd either have to create a second Brush resource and use it:
<SolidColorBrush x:Key="MyTransparentDarkBackground" Opacity="0.5" Color="{DynamicResource DarkBackgroundColorTop}" />
<ScrollViewer Background="{DynamicResource MyTransparentDarkBackground}" />
Or you could just reuse the dynamic Color resource:
<ScrollViewer>
<ScrollViewer.Background>
<SolidColorBrush Opacity="0.5" Color="{DynamicResource DarkBackgroundColorTop}" />
</ScrollViewer.Background>
</ScrollViewer>
Related
I'm already desperate to find the answer why this happens... here's my code:
ResourceDictionary
<Color x:Key="ControlStrokeColorDefault">#0F000000</Color>
<Color x:Key="ControlStrokeColorSecondary">#29000000</Color>
<LinearGradientBrush x:Key="ControlElevationBorderBrush" MappingMode="Absolute" StartPoint="0,0" EndPoint="0,3">
<LinearGradientBrush.RelativeTransform>
<ScaleTransform CenterY="0.5" ScaleY="-1" />
</LinearGradientBrush.RelativeTransform>
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.33" Color="{DynamicResource ControlStrokeColorSecondary}" />
<GradientStop Offset="1.0" Color="{DynamicResource ControlStrokeColorDefault}" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
Panel
<Grid Background="#29000000">
<WrapPanel Background="#F7F7F7" VerticalAlignment="Center" HorizontalAlignment="Center">
<Border Margin="20" Width="100" Height="60" BorderThickness="2" BorderBrush="{DynamicResource ControlElevationBorderBrush}">
<TextBlock>Ok</TextBlock>
</Border>
<Border Margin="20" Width="100" Height="100" BorderThickness="2" BorderBrush="{DynamicResource ControlElevationBorderBrush}">
<TextBlock>???</TextBlock>
</Border>
</WrapPanel>
</Grid>
As a Result, I get that the gradient is calculated only on the first element... is this a wpf bug or am I missing something?
this is because of ScaleY="-1" in ScaleTransform
Scale creates different sizes at different heights
VS2012 >> New Silverlight project >>
<UserControl x:Class="SilverlightApplication2.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<Grid x:Name="LayoutRoot" >
<Button Background="Red" />
</Grid>
</UserControl>
The silverlight button default template has change somehow.. how i reset and restore to default?
WPF buttons background works fine
only buttons issue , for now other controls doesn't have this problem
Like #Alex says, the gradient is a result of the Template used by the Button. No matter what color you set the background to, it's going to show the gradient.
One way to change this is by modifying the template as #Alex suggested.
Another way is to set the Content of the Button to a Grid, and then set the Grid to whatever solid color you want.
<Button Height="100" Click="OnClick" Width="100">
<Button.Content>
<Grid Height="100" Width="100" IsHitTestVisible="False" Background="Blue"/>
</Button.Content>
</Button>
This all depends on the template of the button. I'm guessing the default template has some layers on top that simulate translucent shading or something like that. Replace the control template with a simpler one and it should work. You can find the default templates on MSDN, you can just modify the button one instead of starting from scratch: http://msdn.microsoft.com/en-us/library/cc278069(v=vs.95).aspx
Specifically I'm guessing this part is the gradient:
<Border x:Name="Background" CornerRadius="3" Background="White" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">
<Grid Background="{TemplateBinding Background}" Margin="1">
<Border Opacity="0" x:Name="BackgroundAnimation" Background="#FF448DCA" />
<Rectangle x:Name="BackgroundGradient" >
<Rectangle.Fill>
<LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1">
<GradientStop Color="#FFFFFFFF" Offset="0" />
<GradientStop Color="#F9FFFFFF" Offset="0.375" />
<GradientStop Color="#E5FFFFFF" Offset="0.625" />
<GradientStop Color="#C6FFFFFF" Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
</Border>
I have a grid, which contains a Canvas and StackPanel on same level. I mean the StackPanel placed on the top of the canvas. The canvas contains multiple elements which should be dragable. And I have to handle the Drop event of the StackPanel. The drop event not working if the stackpanel does not contain any child elements, even if I set the height for stackpanel. If I set the Background property for StackPanel it will work, but in this case the mousemove events of canvas child elements(below stackpanel) not working.
Here is the XAML
<Grid>
<jas:DragCanvas
x:Name="dragCanvas"
Grid.Row="1"
AllowDragging="{Binding ElementName=btnAllowDragging, Path=IsChecked}"
AllowDragOutOfView="{Binding ElementName=btnAllowDragOutOfView, Path=IsChecked}"
>
<Ellipse
Canvas.Left="100" Canvas.Bottom="100"
Width="65" Height="70">
<Ellipse.Fill>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<LinearGradientBrush.GradientStops>
<GradientStop Color="LightGray" Offset="0" />
<GradientStop Color="Black" Offset="0.75" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
</jas:DragCanvas>
<DockPanel LastChildFill="False">
<Border DockPanel.Dock="Left" BorderBrush="Black" BorderThickness="2">
<StackPanel x:Name="stackPanel" Drop="StackPanel_Drop" AllowDrop="True">
<Border Height="100" Width="100" Background="Red"></Border>
</StackPanel>
</Border>
</DockPanel>
</Grid>
How to provide the outer glow effect to border?
<Grid Width="200" Height="200">
<Grid.Background>
<RadialGradientBrush Center="0.5,0.5" GradientOrigin="0.5,0.5" RadiusX="0.8" RadiusY="0.8">
<RadialGradientBrush.GradientStops>
<GradientStop Offset="0" Color="#FF123B5F" />
<GradientStop Offset="1" Color="#FF001F31" />
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>
</Grid.Background>
<Border Width="180" Height="180" Margin="10" Background="Transparent"
BorderBrush="White" BorderThickness="1">
<Border.BitmapEffect>
<OuterGlowBitmapEffect GlowColor="White" GlowSize="3" Opacity="1" />
</Border.BitmapEffect>
</Border>
</Grid>
I have tried this but it not working
BitmapEffects are no longer supported in .NET 4.0.
From MSDN
Important In the .NET Framework 4 or later, the BitmapEffect class is
obsolete. If you try to use the BitmapEffect class, you will get an
obsolete exception. The non-obsolete alternative to the BitmapEffect
class is the Effect class. In most situations, the Effect class is
significantly faster.
It isn't the same thing but you can try with a DropShadowEffect with ShadowDepth close to 0 instead.
Example
<Border Width="180" Height="180" Margin="10" Background="Transparent"
BorderBrush="White" BorderThickness="2" Opacity="1.0">
<Border.Effect>
<DropShadowEffect ShadowDepth="0"
Color="White"
Opacity="1"
BlurRadius="5"/>
</Border.Effect>
</Border>
Comparison between the BitmapEffects you had and DropShadowEffect above. DropShadowEffect to the right.
I have developed a custom data grid control. This control has two parts, one is the custom template used by the data grid itself and the other is my custom control which adds a title area to the data grid.
I have a class called CustomDataGrid, here is the XAML.
<UserControl x:Class="MDT_Designer.Presentation.ScreenControls.CustomDataGrid"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
Name="CDataGrid" >
<UserControl.Resources>
<ResourceDictionary x:Key="Dictionary" Source="CustomizedControls.xaml"/>
</UserControl.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="{Binding ElementName=CDataGrid, Path=TitleAreaHeight}"/>
<RowDefinition Height="{Binding ElementName=CDataGrid, Path=GridAreaHeight}"/>
</Grid.RowDefinitions>
<Grid Name="TitleArea" DockPanel.Dock="Top" Background="{Binding ElementName=CDataGrid, Path=TitleBackColor}" >
<Viewbox HorizontalAlignment="{Binding ElementName=CDataGrid, Path=TitleAlignment}">
<TextBlock Name="TitleText" Text="{Binding ElementName=CDataGrid, Path=Title}" Margin="2,0,0,0" FontFamily="{Binding ElementName=CDataGrid, Path=TitleFontFamily}" Foreground="{Binding ElementName=CDataGrid, Path=TitleTextColor}"/>
</Viewbox>
</Grid>
<DataGrid Name="DataGridArea" Grid.Row="1" IsReadOnly="True" HorizontalGridLinesBrush="DarkGray" VerticalGridLinesBrush="DarkGray" VerticalScrollBarVisibility="Visible" Background="AliceBlue" >
</DataGrid>
</Grid>
</UserControl>
In my CustomDataGrid.xaml.cs file I have defined properties as such.
public static DependencyProperty TitleAlignmentProperty = DependencyProperty.Register("TitleAlignment", typeof(HorizontalAlignment), typeof(CustomDataGrid));
public HorizontalAlignment TitleAlignment
{
get { return (HorizontalAlignment)base.GetValue(TitleAlignmentProperty); }
set { base.SetValue(TitleAlignmentProperty, value); }
}
I am just showing one as a sample, and this works. I do wish that I could change the binding in the XAML to get rid of ElementName=CDataGrid, but any way I have as an alternative doesn't work.
Now to my problem. My custom template for the data grid control itself is stored in the dictionary CustomizedControls.xaml.
Here is one example of binding issues. I had to create this resource.
<LinearGradientBrush x:Key="HeaderBackgroundBrush" EndPoint="0.5,1" StartPoint="0.5,0" >
<GradientStop Color="{DynamicResource {x:Static SystemColors.ControlLightColorKey}}" Offset="0" />
<GradientStop Color="{DynamicResource {x:Static SystemColors.ControlDarkColorKey}}" Offset="1" />
</LinearGradientBrush>
Then I use it in Border definition for the column header.
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Grid>
<Border x:Name="columnHeaderBorder" BorderThickness="1" Padding="3,0,3,0"
Background="{DynamicResource HeaderBackgroundBrush}">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="{DynamicResource BorderLightColor}" Offset="0" />
<GradientStop Color="{DynamicResource BorderDarkColor}" Offset="1" />
</LinearGradientBrush>
</Border.BorderBrush>
<ContentPresenter x:Name="columnHeaderPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Style="{DynamicResource HeaderContentStyle}" />
</Border>
<Thumb x:Name="PART_LeftHeaderGripper" HorizontalAlignment="Left" Style="{StaticResource ColumnHeaderGripperStyle}" />
<Thumb x:Name="PART_RightHeaderGripper" HorizontalAlignment="Right" Style="{StaticResource ColumnHeaderGripperStyle}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Then to change it in my code behind I have to do this.
LinearGradientBrush headerBrush = (LinearGradientBrush)TryFindResource("HeaderBackgroundBrush");
headerBrush.GradientStops[0] = new GradientStop(brush.Color, 0.0);
I cannot change the brush itself, I can just change a property of the brush. I have tried every binding technique I can think of, but nothing seems to work when the style is in a dictionary.
What I would like to be able to do is somehow bind something like BorderLightColor, which is BorderBrush setting, so that in my code behind I can change it's value.
Any help would make my day, it would make my whole weekend in fact. Thanks.
Why cant you change the brush? You should be able to just assign the brush reference to the control. Does this not work? FindResource should search the Parent Element of the FrameworkElement you are calling it on and up the tree, the application resources, then Themes ending in System Resources. Forgive my VB...
Private Sub Button_Click(ByVal sender as Object, ByVal e as System.Windows.RoutedEventArgs)
Dim MyBrush2 as Brush = Me.FindResource("Brush2")
Me.MyRect.Background = MyBrush2
End Sub
And the window contents:
<Window.Resources>
<LinearGradientBrush x:Key="Brush1" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="Brush2" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF0800FF" Offset="0"/>
<GradientStop Color="Red" Offset="1"/>
</LinearGradientBrush>
</Window.Resources>
<Grid x:Name="LayoutRoot">
<Grid x:Name="MyRect" HorizontalAlignment="Left" Margin="63,66,0,174" Width="242" Background="{DynamicResource Brush1}" />
<Button Content="Button" HorizontalAlignment="Right" Height="60" Margin="0,117,95,0" VerticalAlignment="Top" Width="156" Click="Button_Click"/>
</Grid>