I am working with the MaterialDesign Icon pack which has a single XAML with a bunch of Canvas items declared such as:
<Canvas x:Key="appbar_3d_obj" Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
<Path Width="40" Height="40" Fill="{DynamicResource BlackBrush}" Canvas.Left="18" Canvas.Top="18" Stretch="Fill" Data="F1 M 18,21.7037L 43.9259,18L 58,25.4074L 58,54.2963L 32.8148,58L 18,49.1111L 18,21.7037 Z "/>
</Canvas>
Then in the MainWindow.xaml I have:
<Button Content="{DynamicResource appbar_3d_obj}" Margin="55,400,707,21" />
The issue I have is that while they render properly after compiling, in the Designer you can't see them as the stroke is transparent / undefined. I could set Fill="Black" in the Icons.xaml file, but it seems I should learn how to do it the right way :)
How can I set the color so I can see the icons during design time?
Hard to know how to answer for sure with the small code example you posted but have you tried simply defining the BlackBrush in the resources for either the the MainWindow's XAML (or the Canvas's)?
<Window ...>
<Window.Resources>
<SolidColorBrush x:Key="BlackBrush" Color="Black"/>
</Window.Resources>
...
</Window>
Related
BACKGROUND: We are using light projectors to display our application. Light projectors can be used just like displays. Projectors, however induce distortions that are corrected using geometric warping. We create shaders using the Shader properties provided on the UIElement class in WPF to do the geometric corrective warping. We have a handle on all that.
PROBLEM: All UIElement visuals are properly corrected on the projector screen -- except on the WebView2 UIElement. I have come to the conclusion that the Effect property of the WebView2 class doesn't work.
THIS WORKS: (No Webview2)
<Grid>
<Rectangle x:Name="Grid0" Height="800" Width="1280">
<Rectangle.Fill>
<ImageBrush x:Name="ProjectorLut" />
</Rectangle.Fill>
</Rectangle>
<Canvas Height="800" Width="1280" >
<Image ImageSource="BoundToRenderBitmpapSource" Height="800" Width="1280"/>
<Canvas.Effect>
<local:CalibrationEffect>
<local:CalibrationEffect.Input2>
<VisualBrush Visual="{Binding ElementName=Grid0}" />
</local:CalibrationEffect.Input2>
</local:CalibrationEffect>
</Canvas.Effect>
</Canvas>
</Grid>
THIS DOESN'T WORK
<Grid>
<Rectangle x:Name="Grid0" Height="800" Width="1280">
<Rectangle.Fill>
<ImageBrush x:Name="ProjectorLut" />
</Rectangle.Fill>
</Rectangle>
<Canvas Height="800" Width="1280" >
<wv2:WebView2 Name="webView" Source="https://earth.google.com" Height="800" Width="1280" >
</wv2:WebView2>
<Canvas.Effect>
<local:CalibrationEffect>
<local:CalibrationEffect.Input2>
<VisualBrush Visual="{Binding ElementName=Grid0}" />
</local:CalibrationEffect.Input2>
</local:CalibrationEffect>
</Canvas.Effect>
</Canvas>
</Grid>
So I tried something different. I replaced the XAML code for WebView2 with an image class bound to a RenderTargetBitmap generated imagesource rendered by creating the RenderTargetBitmap imagesource in code behind. That doesn't work for me either.
QUESTION: How can I look at this problem differently or am I doing something I need to look at more deeply?
I am using Desptop WPF and I appreciate your help.
I converted a .svg file to .xaml with inkscape and the resulting file is a canvas. I added the whole canvas to a Resource in a file ImageResources.xaml:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Canvas x:Key="xamltest" Name="svg2" Width="9354.3341" Height="5977.5567">
<Canvas.RenderTransform>
<TranslateTransform X="0" Y="0"/>
...
...
...
</Canvas>
</ResourceDictionary>
Then I merge the resource files to the resource dictionary:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/AP_PlugIn;component/Resources/BrushLists.xaml" />
<ResourceDictionary Source="/AP_PlugIn;component/Resources/System/ConverterResources.xaml" />
<ResourceDictionary Source="/AP_PlugIn;component/Resources/ImageResources.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
Finally I try to display the canvas in a Grid with a ContentControl but the Image is not appearing. What could be wrong? I get no error and my Project starts correctly
<Grid>
<ContentControl Content="{StaticResource xamltest}" Width="1253" Height="637" />
</Grid>
The Canvas seems to be a lot larger than the area provided by the ContentControl.
You may use Viewbox instead, which scales its child element:
<Viewbox Child="{StaticResource xamltest}" Width="1253" Height="637"/>
Looking at the dimensions of the Canvas, I suspect that the visible portion of the image is being drawn off the screen.
Try swapping the canvas for a grid, without specifying its size.
The following minimal proof of concept works fine
<Window.Resources>
<Grid x:Key="MyImage">
<Path
Data="M 0,0 M 100,100 M 25,50 L 50,25 L 75,50 L 50,75 z"
Stretch="Fill"
Stroke="Blue"
StrokeThickness="5" />
<Path
Data="M 0,0 M 100,100 M 25,25 L 25,75 L 75,75 L 75,25 z"
Stretch="Fill"
Stroke="Black"
StrokeThickness="10" />
</Grid>
</Window.Resources>
<Grid
Margin="16"
Background="AliceBlue">
<ContentControl Content="{StaticResource MyImage}" />
</Grid>
Both solutions from Clemens and Peregrine work good with simple canvas like the one Peregrine posted or small icons I found in the web, but it is not working with the big file a got after conversion. I think the problem lies with the file thrown by inkScape. I removed most of the lines of the xaml image and some parts are displayed. It is difficult to find the problem because I am not using visual Studio, am using another plattform called VisiWin and there is no way to debug. Have you worked with xaml files converted with inkScape?
I have a chart with thin lines as markers which the user can hover over to get their values.
I would like to make the area in which the tooltip activates bigger but keep the actual line the same size as it is quite difficult for the use to actually hover over.
I also have one line that the user can drag around and it is very difficult to get the precise spot to click and drag.
This is my template for the marker but I am not sure how to accomplish this goal, can anyone point me in the right direction?
<Geometry x:Key="LineGeometry">M 0,0 L 5,0 L 5,15 L 0,15 Z</Geometry>
<DataTemplate>
<!-- Define the template for the actual markers -->
<Path Width="10"
Height="10"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Data="{StaticResource LineGeometry}"
Stretch="Fill"
Stroke="{StaticResource BlackBrush}"
StrokeThickness="0.5">
<Path.ToolTip>
<!-- Lots of tooltip definition stuff -->
</Path.ToolTip>
</Path>
</DataTemplate>
Visual Studio 2015
WPF
C#
Infragistics XamDataChart
Your actual problem is you have not used the Fill property of Path,so while creating this shape there is literally nothing in between lines, that's why if you check IsMouseOver property when Mouse pointer is inside this shape, it will return false. however if you specify Fill property result will be as expected.
Use Fill property as below and your ToolTip will be visible if Mouse is over Path shape anywhere.:
Fill="Transparent"
So your output won't get impacted visually. below is a sample program.
XAML:
<Window.Resources>
<Geometry x:Key="LineGeometry">M 0,0 L 5,0 L 5,15 L 0,15 Z</Geometry>
</Window.Resources>
<StackPanel>
<Path Width="100"
Height="100"
Name="path"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Data="{StaticResource LineGeometry}"
Stretch="Fill"
Stroke="Red" Margin="50"
StrokeThickness="5"
Fill="Transparent"
MouseLeftButtonDown="Path_MouseLeftButtonDown">
<Path.ToolTip>
<TextBlock Text="This is My Tooltip of Path" />
</Path.ToolTip>
</Path>
<StackPanel Orientation="Horizontal">
<Label Content="Is Mouse Over Path : " />
<Label Content="{Binding ElementName=path,Path=IsMouseOver}" BorderThickness="0.5" BorderBrush="Black"/>
</StackPanel>
</StackPanel>
Output:
Sorry,don't know how to captureMousein screenshot, but mouse is in between the shape while image was captured. RemoveFill
propertyfromPathand then see the change in ouput.
If I understand you correctly, you just want to show tooltip inside your rectangle represented by Path. If so you can just wrap your path in transparent border and set tooltip on border:
<Border Background="Transparent">
<Path Width="10"
Height="10"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Data="{StaticResource LineGeometry}"
Stretch="Fill"
Stroke="Black"
StrokeThickness="0.5"></Path>
<Border.ToolTip>
<TextBlock Text="Tooltip" />
</Border.ToolTip>
</Border>
I have downloaded this pack : http://modernuiicons.com/ and I'm trying to use the xaml icons.
I have added a xaml file to my solution with the following content
<?xml version="1.0" encoding="utf-8"?>
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="appbar_check" Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
<Path Width="37.9998" Height="31.6665" Canvas.Left="19.0001" Canvas.Top="22.1668" Stretch="Fill" Fill="#FF000000" Data="F1 M 23.7501,33.25L 34.8334,44.3333L 52.2499,22.1668L 56.9999,26.9168L 34.8334,53.8333L 19.0001,38L 23.7501,33.25 Z "/>
</Canvas>
Now, how do I reference this canvas to my usercontrol?
Usercontrol
<UserControl
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"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
mc:Ignorable="d"
x:Class="UserControlSolution.UserControlButton"
x:Name="UserControl"
Height="50" Background="#FF2F2F2F" BorderBrush="#FF919191">
<Grid x:Name="LayoutRoot" Height="50" RenderTransformOrigin="0.5,0.5">
<Rectangle x:Name="rectangle" RenderTransformOrigin="0.5,0.5" Width="230" Height="50"/>
<TextBlock x:Name="NameLabel" FontSize="16" Foreground="#FFE5E5E5" Height="34" Width="149" Text="Onthaal Telefoon" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="10,10,0,0" FontFamily="Segoe UI Semibold"/>
<Viewbox HorizontalAlignment="Right" VerticalAlignment="Top" Height="16.5" Width="17.789" Margin="0,15,24.5,0">
// Here I want to reference the canvas
</Viewbox>
</Grid>
</UserControl>
I can copy the content of the canvas offcourse but there must be another solution.
Add the Canvas and Path as a resource on the page or in the App.xaml or whatever, remember to set x:Key. Then use a ContentControl to reference the resource.
<!-- In Resources, either on the Page or App.xaml for app-wide reuse -->
<Canvas x:Key="TickCanvas" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="appbar_check" Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
<Path Width="37.9998" Height="31.6665" Canvas.Left="19.0001" Canvas.Top="22.1668" Stretch="Fill" Fill="#FF000000" Data="F1 M 23.7501,33.25L 34.8334,44.3333L 52.2499,22.1668L 56.9999,26.9168L 34.8334,53.8333L 19.0001,38L 23.7501,33.25 Z "/>
</Canvas
<!-- On your page, or somewhere -->
<ViewBox>
<ContentControl Content="{StaticResource TickCanvas}" />
</ViewBox>
As proof it works, I was able to see its a tick!
Just a side note, I often take just the path data, the mini-markup and save that as a string resource. Then using a Path I reference the markup resource via Data={StaticResource TickPath} that way I can resize the vector using the Height and Width on the Path itself or let it expand and shrink by its parent by setting Stretch="Uniform". Saves the overhead of the Viewbox.
<!-- In App.xaml for app-wide reuse -->
<x:String x:Key="TickPath">F1 M 23.7501,33.25L 34.8334,44.3333L 52.2499,22.1668L 56.9999,26.9168L 34.8334,53.8333L 19.0001,38L 23.7501,33.25 Z </x:String>
<!-- On page, template or wherever -->
<Path Data="{StaticResource TickPath} />
This technique may not work in this instance as there's a clip geometry there. But for simple vectors its fine, I have hand drawn typefaces (that can't be embedded as fonts) stored as markup in files, I then load them in at runtime - Data={Binding PathData} works just as well.
A variation based on Luke's answer allowing a color to be specified down to the path.
<Style TargetType="{x:Type ContentControl}" x:Key="TickIcon">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Viewbox Width="{Binding Width, RelativeSource={RelativeSource AncestorType=ContentControl}}">
<Canvas x:Name="appbar_check" Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
<Path Width="37.9998" Height="31.6665" Canvas.Left="19.0001" Canvas.Top="22.1668" Stretch="Fill" Fill="{Binding Foreground, RelativeSource={RelativeSource AncestorType=ContentControl}}" Data="F1 M 23.7501,33.25L 34.8334,44.3333L 52.2499,22.1668L 56.9999,26.9168L 34.8334,53.8333L 19.0001,38L 23.7501,33.25 Z "/>
</Canvas>
</Viewbox>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
and
<Button Command="{Binding ConnectCommand}" VerticalAlignment="Stretch">
<WrapPanel>
<ContentControl Foreground="AliceBlue" Style="{StaticResource TickIcon}" Width="20" />
<TextBlock>Connect</TextBlock>
</WrapPanel>
</Button>
I have a WPF control that I would like to overlay onto a WinForms application. So I have dutifully created a Element Host that can show the following WPF object:
<UserControl x:Class="LightBoxTest.LightBox"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="300" Width="300" Background="Transparent">
<Grid Name="dialogHolder" Background="Transparent" Opacity="1">
<Rectangle Name="rectangle1" Stroke="White" Fill="Black" RadiusX="10" RadiusY="10" Opacity="0.5" />
<StackPanel Name="stackPanel1" Background="Transparent" Height="300" VerticalAlignment="Top">
<Rectangle Name="spacer" Opacity="0" Stroke="Gray" Fill="White" RadiusX="10" RadiusY="10" Height="100" Width="300" />
<Grid Height="100" Name="contentHolder" Width="250">
<Rectangle Name="dialog" Stroke="Gray" Fill="White" RadiusX="10" RadiusY="10" Height="100" Width="250" />
</Grid>
</StackPanel>
</Grid>
</UserControl>
The trouble is that the Controls on the WinForm Form do not render and the WPF just obliterates them on the screen.
The element host is created like:
dialogHost = new ElementHost();
dialogHost.Child = dialog;
dialogHost.BackColorTransparent = true;
dialogHost.BringToFront();
dialogHost.Show();
Is there something I should be doing and Im not?
Are there known issues about showing transparent WPF controls over Winforms?
Any articals that may help?
Note: This question is related to this question
I think you're running into an airspace issue. AFAIK, you can't mix WPF transparency and ElementHost transparency since the ElementHost owns the airspace.
There's a short blurb in the link about creating non-rectangular hwnds to host WPF content, and that may get you farther.
Perhaps you can consider migrating more of the WinForms app to WPF?
You should read this :Black background before loading a wpf controll when using ElementHost
Just hide & show it (not cool but works)
That seems like the interop airspace problem.
You probably already tried this, but how about setting the Opacity on the User Control?