WPF LiveChart how to remove White border of Piechart series - wpf

I have a WPF-LiveChart(lvcharts.net) PieSeries Chart but it contains a white border .How can i Remove those white background .please see the Code
<lvc:PieChart Visibility="Visible" Name="TestCaseChart" Grid.Row="0" Grid.Column="1" Series="{Binding SeriesCollection}" InnerRadius="100" Width="180" Height="180" BorderThickness="0" BorderBrush="Transparent"></lvc:PieChart>
I tried the BorderBrush and BorderThickness properties but the Chart is not taking those properties.Basically my Screen background is black so it is awkward to see the white background on these charts series .

try this:
<lvc:PieChart LegendLocation="Bottom" DataClick="Chart_OnDataClick" Hoverable="False" DataTooltip="{x:Null}" ScrollBarFill="{x:Null}">
<lvc:PieChart.Series>
<lvc:PieSeries Title="Maria" Values="13" DataLabels="True"
LabelPoint="{Binding PointLabel}" Stroke="{x:Null}" StrokeThickness="0"/>
<lvc:PieSeries Title="Charles" Values="4" DataLabels="True"
LabelPoint="{Binding PointLabel}" Foreground="{x:Null}" Stroke="{x:Null}" StrokeThickness="0"/>
<lvc:PieSeries Title="Frida" Values="6" DataLabels="True"
LabelPoint="{Binding PointLabel}" Foreground="{x:Null}" Stroke="{x:Null}" StrokeThickness="0"/>
<lvc:PieSeries Title="Frederic" Values="2" DataLabels="True"
LabelPoint="{Binding PointLabel}" Foreground="{x:Null}" Stroke="{x:Null}" StrokeThickness="0"/>
</lvc:PieChart.Series>
</lvc:PieChart>

Related

How to get rid of (or match color of) space between RichTextBox and adjacent image

So I have the following XAML:
<DockPanel Name="dpSchedItem" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" LastChildFill="True">
<Image DockPanel.Dock="Right" Height="17" Width="17" VerticalAlignment="Top" HorizontalAlignment="Right" Cursor="Hand" Margin="0,0,0,0" Source="Resources\Pencil_Gray.png" MouseUp="Image_MouseUp" />
<RichTextBox DockPanel.Dock="Left" Name="rtbText" Margin="0,0,0,0" VerticalScrollBarVisibility="Auto" BorderThickness="0" BorderBrush="Transparent" IsReadOnly="True" />
</DockPanel>
And I add content to the RichTextBox in code:
rtbText.BorderBrush = BackgroundColor
Dim p As New Paragraph
p.Inlines.Add(New Bold(New Run(SO & If(Title = "", "", " - " & Title))))
rtbText.Document = New FlowDocument(p) With {.Background = BackgroundColor, .PagePadding = New Thickness(0.0)}
But it's rendered like this:
I tried overriding the control template like it shows here for a button, but the RTB doesn't have the same content property. From another post I got the idea to set the PagePadding thickness to 0 for the FlowDocument, but that didn't get the results I wanted.
I want that space (border or margin, or whatever it is) to be green like everything else.
It is unclear if the holding grid/page is green but make the controls background color Transparent until a full green is achieved such as:
<DockPanel Background="Transparent"...>
<RichTextBox Background="Transparent" BorderBrush="Transparent" ...>
Or make the DockPanel's background Green and the RichTextBox Background Transparent.

Setting the background color of a FlowDocument in a FlowDocumentReader

I have been using a RichTextBox to show FlowDocuments in a WPF app, but I found that there is something called FlowDocumentReaderwhich gives me alot of functionality for free. The problem is that while the background in the RichTextBox was shown as white, it is now completely transparent.
I have tried setting the Backgroundproperty, but that only changes the toolbar at the bottom.
<FlowDocumentReader Grid.Row="1" Grid.Column="1" Name="rtbShowDoc" Margin="20, 0" Background="White">
<FlowDocumentReader.Effect>
<DropShadowEffect BlurRadius="10" Color="Black" ShadowDepth="3" />
</FlowDocumentReader.Effect>
</FlowDocumentReader>
I can do an ugly fix with a DockPanel, but that does not seem like the right way to do it.
<DockPanel Grid.Row="1" Grid.Column="1" Margin="20, 0" Background="White">
<DockPanel.Effect>
<DropShadowEffect BlurRadius="10" Color="Black" ShadowDepth="3" />
</DockPanel.Effect>
<FlowDocumentReader Grid.Row="1" Grid.Column="1" Name="rtbShowDoc" Background="White">
</FlowDocumentReader>
</DockPanel>
How can I set the background of a FlowDocumentReader?
EDIT: Added screenshot of running application. As you can see the dropshadow effect is applied to all text inside the FlowDocument.
Try setting the background of the FlowDocument
FlowDocument.Background Property
In C#:
FlowDocument.Background = Brushes.Red;

Why is this clipping happening

Notice in the code i didn't put any clipping on the grid, why is this rectangle being displayed clipped to the size of the grid.
I added the offset just to show that even if i move it to the side the fill of the grid is not red.
<Grid Height="135" Width="162">
<Rectangle Width="300" Height="249" HorizontalAlignment="Center" VerticalAlignment="Center" Fill="#FFDB1919" UseLayoutRounding="False">
<Rectangle.Projection>
<PlaneProjection LocalOffsetX="-42"/>
</Rectangle.Projection>
</Rectangle>
</Grid>
Grids have clipping of content on by default.
The quickest fix is to place the rectangle in a canvas (which has no clipping by default):
<Grid Height="135" Width="162">
<Canvas>
<Rectangle Width="300" Height="249" HorizontalAlignment="Center" VerticalAlignment="Center" Fill="#FFDB1919" UseLayoutRounding="False" StrokeThickness="5">
<Rectangle.Projection>
<PlaneProjection LocalOffsetX="-42"/>
</Rectangle.Projection>
</Rectangle>
</Canvas>
</Grid>
This is what happening here:
1. WPF layout is done. it will place the
rectangle in the center as it was specified.
2. The rectangle will be clipped by the Grid.
3. The Projection transformation is applied after all this stuff.
In your case you did move already clipped rectangle by -42 pixels

How to add a border to the Text inside a TextBlock in WPF?

I am kinda new to WPF, dont know if the question is weird. I wanted to know if its possible to add a border around the text inside a textBlock.
EDIT:
As per suggestion I have tried both but without much success:
<Border BorderBrush="#FF0B232F" BorderThickness="2">
<TextBlock HorizontalAlignment="Left" Text="TextBlock" TextWrapping="Wrap" FontSize="36" FontWeight="Bold" Foreground="#FF88BCCD" OpacityMask="Black"/>
</Border>
and
<Label BorderBrush="#FF0B232F" BorderThickness="2,2,2,2" Content="TextBlock" FontSize="36" FontWeight="Bold" Foreground="#FF88BCCD" />
Am I doing something wrong here?
In such cases I use Label or TextBlock placed in Border.
Both your approaches are correct, however, if you have the textblock/label inside a grid (or any other container) declared as you have, its contents will stretch.
Try setting the VerticalAlignment and/or HorizontalAlignment to an appropriate setting (Top/Left, Center)..
something like this:
<Border BorderBrush="#FF0B232F" BorderThickness="2" VerticalAlignment="Top">
<TextBlock HorizontalAlignment="Left" Text="TextBlock" TextWrapping="Wrap" FontSize="36" FontWeight="Bold" Foreground="#FF88BCCD" OpacityMask="Black"/>
</Border>
Assuming that you are asking for a full size TextBlock with a border overlay within the bounds of the TextBlock you could wrap it in a Grid and draw the borders over the top of the TextBlock like this...
<Grid HorizontalAlignment="Left">
<TextBlock Text="TextBlock" TextWrapping="Wrap" FontSize="36" FontWeight="Bold" Foreground="#FF88BCCD" OpacityMask="Black" />
<Border BorderBrush="#FF0B232F" BorderThickness="2" />
</Grid>
Because we haven't specified the grid row and column on the TextBlock and Border objects the border overlays on top of the TextBlock.
if you just want to have a border around your textblock or any other control use :
<Border>
<TextBlock></TextBlock>
</Border>
you set border properties like color ,cornerradius ,thickness,...

How do I put a border around an image in WPF?

I have a StackPanel containing five images and I want to put a black border around each image.
The XAML I have at the moment is:
<Image Name="imgPic1"
Width="100"
Height="75"
Stretch="Fill"
VerticalAlignment="Top" />
I thought I would be just able to put a one-unit margin or padding on the image and set a background color to 000000 but Padding and Background are both invalid for images.
What is an easy way to do this in XAML? Do I really have to put each image inside another control to get a border around it or is there some other trickery I can use?
Simply wrap the Image in a Border control
<Border BorderThickness="1">
<Image Name="imgPic1"
Width="100"
Height="75"
Stretch="Fill"
VerticalAlignment="Top" />
</Border>
You could also provide a style you apply to images that does this if you don't want to do it around every image
Final solution from answer and comments added by Pax:
<Border BorderThickness="1"
BorderBrush="#FF000000"
VerticalAlignment="Top">
<Image Name="imgPic1"
Width="100"
Height="75"
Stretch="Fill"
VerticalAlignment="Top"/>
</Border>
The accepted answer will not work because of the problem described here
https://wpf.2000things.com/2011/04/17/279-adding-a-border-around-an-image-control/
I solved it this way.
<Viewbox>
<Border BorderThickness="3" BorderBrush="Red">
<Image Stretch="None" ></Image>
</Border>
</Viewbox>
I just stumbled upon this post and the other answer did not work right. Maybe because I now use framework 4 and this post is old?
In any case - if someone will see this by chance in the future - here is my answer:
<Border Name="brdSiteLogo"
BorderThickness="2"
BorderBrush="#FF000000"
VerticalAlignment="Top"
HorizontalAlignment="Left"
Margin="12,112,0,0"
Height="128"
Width="128">
<Image Name="imgSiteLogo"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Stretch="Fill"/>
</Border>
The border thickness and brush are important (if you wont choose a color - you will not see the border!!!)
Also, the border should be aligned on your window. The image is "inside" the border, so you can use margins or just stretch it like I did.

Resources