I created a resource that contains a visual brush. the items in this brush are a grid (width set to auto), and some other elements. the grid backcolor is black, and I have some other rectangles within the grid.
When I set the chart.background to the resource of the visual brush, the image appears, but there are white gaps to the left and right of the chart. I am trying to find the correct combination, but it is frustrating right now.
What would be the guidelines on creating a visual brush so that the chart background is completely covered by the visual brush? The chart I am creating will vary in size as well, so I wanted something that is similar to the docking option in VB where it resizes automatically to the background border.
Thank you so much for any advise.
Hi,
There are some margins, etc, around the chart. The easiest way to get the background to cover the entire space would be to put the chart in a Grid and set the grid's background to be the VisualBrush. Does that give you the effect you are looking for?
-Graham
I do have what you mentioned in my code. Here is the visual brush that is created. I made this a resource in my xaml.
I am using the windows elementhost to get to the wpf chart from a windows form.
I create the xam chart which is in a wpf user control.
I make a call within the user control to set the chart background
chart.background = ...findresource("CustomLighting")
the wpf user control is set to dockstyle.fill in the element host, so the chart shows correctly inside the elementhost.
here is the visual brush I am using. See on your end if you see white gaps in the top and right sections of the chart. the entire chart background should be black with a grey border on left bottom, right and some "light effects" on the top.
I have a default scene created (margintype =percent). and gridarea (margintype=percent), and the chart margin all set to 0 thickness
let me know what you see, because I think it is just something I have to set on the visual brush maybe grid setting or something, but I cannot pinpoint it..thanks so much.
<VisualBrush TileMode="None" x:Key="CustomLighting" > <VisualBrush.Visual > <Grid Background="Black" Margin="0,0,-149,-149"> <Rectangle Fill="Black" StrokeThickness="6"> <Rectangle.Stroke> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FF333333" Offset="0.574"/> <GradientStop Color="#FF7E7E7E" Offset="1"/> <GradientStop Color="#FF686868" Offset="0.013"/> </LinearGradientBrush> </Rectangle.Stroke> </Rectangle> <Ellipse StrokeThickness="0" RenderTransformOrigin="0.479,0.488" Width="216" Margin="16.5,7,556.5,31"> <Ellipse.Effect> <BlurEffect Radius="20"/> </Ellipse.Effect> <Ellipse.OpacityMask> <LinearGradientBrush EndPoint="0.491,1.014" StartPoint="0.499,0.009"> <GradientStop Color="Black"/> <GradientStop Offset="0.781"/> <GradientStop Color="#FFA1A1A1" Offset="0.574"/> </LinearGradientBrush> </Ellipse.OpacityMask> <Ellipse.Fill> <RadialGradientBrush RadiusY="0.467" RadiusX="0.45" GradientOrigin="0.518,0.04" Center="0.516,0.399"> <RadialGradientBrush.RelativeTransform> <TransformGroup> <ScaleTransform CenterY="0.399" CenterX="0.516" ScaleY="1" ScaleX="1"/> <SkewTransform AngleY="0" AngleX="0" CenterY="0.399" CenterX="0.516"/> <RotateTransform Angle="-0.545" CenterY="0.399" CenterX="0.516"/> <TranslateTransform/> </TransformGroup> </RadialGradientBrush.RelativeTransform> <GradientStop Color="#00000000" Offset="1"/> <GradientStop Color="#BA5E5E5E"/> </RadialGradientBrush> </Ellipse.Fill> </Ellipse> <Ellipse StrokeThickness="0" RenderTransformOrigin="0.479,0.488" Width="216" Margin="162,8,411,30"> <Ellipse.Effect> <BlurEffect Radius="20"/> </Ellipse.Effect> <Ellipse.OpacityMask> <LinearGradientBrush EndPoint="0.491,1.014" StartPoint="0.499,0.009"> <GradientStop Color="Black"/> <GradientStop Offset="0.781"/> <GradientStop Color="#FFA1A1A1" Offset="0.574"/> </LinearGradientBrush> </Ellipse.OpacityMask> <Ellipse.Fill> <RadialGradientBrush RadiusY="0.467" RadiusX="0.45" GradientOrigin="0.518,0.04" Center="0.516,0.399"> <RadialGradientBrush.RelativeTransform> <TransformGroup> <ScaleTransform CenterY="0.399" CenterX="0.516" ScaleY="1" ScaleX="1"/> <SkewTransform AngleY="0" AngleX="0" CenterY="0.399" CenterX="0.516"/> <RotateTransform Angle="-0.545" CenterY="0.399" CenterX="0.516"/> <TranslateTransform/> </TransformGroup> </RadialGradientBrush.RelativeTransform> <GradientStop Color="#00000000" Offset="1"/> <GradientStop Color="#BA5E5E5E"/> </RadialGradientBrush> </Ellipse.Fill> </Ellipse> <Ellipse StrokeThickness="0" RenderTransformOrigin="0.479,0.488" Margin="551.5,8,21.5,30" Width="216"> <Ellipse.Effect> <BlurEffect Radius="20"/> </Ellipse.Effect> <Ellipse.OpacityMask> <LinearGradientBrush EndPoint="0.491,1.014" StartPoint="0.499,0.009"> <GradientStop Color="Black"/> <GradientStop Offset="0.781"/> <GradientStop Color="#FFA1A1A1" Offset="0.574"/> </LinearGradientBrush> </Ellipse.OpacityMask> <Ellipse.Fill> <RadialGradientBrush RadiusY="0.467" RadiusX="0.45" GradientOrigin="0.518,0.04" Center="0.516,0.399"> <RadialGradientBrush.RelativeTransform> <TransformGroup> <ScaleTransform CenterY="0.399" CenterX="0.516" ScaleY="1" ScaleX="1"/> <SkewTransform AngleY="0" AngleX="0" CenterY="0.399" CenterX="0.516"/> <RotateTransform Angle="-0.545" CenterY="0.399" CenterX="0.516"/> <TranslateTransform/> </TransformGroup> </RadialGradientBrush.RelativeTransform> <GradientStop Color="#00000000" Offset="1"/> <GradientStop Color="#BA5E5E5E"/> </RadialGradientBrush> </Ellipse.Fill> </Ellipse> <Ellipse StrokeThickness="0" RenderTransformOrigin="0.479,0.488" Width="216" Margin="419.75,8,153.25,30"> <Ellipse.Effect> <BlurEffect Radius="20"/> </Ellipse.Effect> <Ellipse.OpacityMask> <LinearGradientBrush EndPoint="0.491,1.014" StartPoint="0.499,0.009"> <GradientStop Color="Black"/> <GradientStop Offset="0.781"/> <GradientStop Color="#FFA1A1A1" Offset="0.574"/> </LinearGradientBrush> </Ellipse.OpacityMask> <Ellipse.Fill> <RadialGradientBrush RadiusY="0.467" RadiusX="0.45" GradientOrigin="0.518,0.04" Center="0.516,0.399"> <RadialGradientBrush.RelativeTransform> <TransformGroup> <ScaleTransform CenterY="0.399" CenterX="0.516" ScaleY="1" ScaleX="1"/> <SkewTransform AngleY="0" AngleX="0" CenterY="0.399" CenterX="0.516"/> <RotateTransform Angle="-0.545" CenterY="0.399" CenterX="0.516"/> <TranslateTransform/> </TransformGroup> </RadialGradientBrush.RelativeTransform> <GradientStop Color="#00000000" Offset="1"/> <GradientStop Color="#BA5E5E5E"/> </RadialGradientBrush> </Ellipse.Fill> </Ellipse> <Ellipse StrokeThickness="0" RenderTransformOrigin="0.479,0.488" Width="216" Margin="294,8,279,30"> <Ellipse.Effect> <BlurEffect Radius="20"/> </Ellipse.Effect> <Ellipse.OpacityMask> <LinearGradientBrush EndPoint="0.491,1.014" StartPoint="0.499,0.009"> <GradientStop Color="Black"/> <GradientStop Offset="0.781"/> <GradientStop Color="#FFA1A1A1" Offset="0.574"/> </LinearGradientBrush> </Ellipse.OpacityMask> <Ellipse.Fill> <RadialGradientBrush RadiusY="0.467" RadiusX="0.45" GradientOrigin="0.518,0.04" Center="0.516,0.399"> <RadialGradientBrush.RelativeTransform> <TransformGroup> <ScaleTransform CenterY="0.399" CenterX="0.516" ScaleY="1" ScaleX="1"/> <SkewTransform AngleY="0" AngleX="0" CenterY="0.399" CenterX="0.516"/> <RotateTransform Angle="-0.545" CenterY="0.399" CenterX="0.516"/> <TranslateTransform/> </TransformGroup> </RadialGradientBrush.RelativeTransform> <GradientStop Color="#00000000" Offset="1"/> <GradientStop Color="#BA5E5E5E"/> </RadialGradientBrush> </Ellipse.Fill> </Ellipse> <Rectangle Height="8" StrokeThickness="0" Fill="#FF656565" VerticalAlignment="Top" Margin="-0.5,-1,0.5,0"/> </Grid> </VisualBrush.Visual> </VisualBrush>
Okay. I think the problem is more related to how I am creating the visual brush and how it scales. thanks for the help.
I'm not sure how your viewbox was defined for those visuals. If you set this viewbox it seems more correct:
Viewbox=".005,.1,.995,.88" ViewboxUnits="RelativeToBoundingBox"
I havent tried this yet, since I thought that the chart background property should take care of it.
If I create xamchart though code and just set the elementhost.child = xamchart, I would be consistent on how I would set the background whether it was a visual brush, linear brush, solid, etc.
I then would not worry about having to create a grid and setting the xam chart within it, etc.. since the background setting for the chart is right there.
Let me know how yours turns out, or if putting the chart within a grid an just setting the grid properties is the way to go in this case.
Before I look into this, what I meant was do something like this:
put the chart into a Grid and call it something like ChartContainer then do:
ChartContainer.background = ...findresource("CustomLighting")
instead. Have you tried this?