I am making a windows phone 8.1 application using C# and XAML and I want to implement an Image map.
I know how to do it in HTML using img tag's usemap attribute, but how using C# and XAML?
You want to do something like this:
<Canvas xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="500" Height="500">
<Canvas.Background>
<ImageBrush ImageSource="yourBackgroundImage.jpg" Stretch="Fill"/>
</Canvas.Background>
<Rectangle Width="50" Height="25" Canvas.Top="100" Canvas.Left="100" />
<Rectangle Width="100" Height="20" Canvas.Top="200" Canvas.Left="300" />
<!-- etc -->
</Canvas>
The Canvas with a background image is analogous to your <img> and the set of Rectangle elements are similar to your <area> tags inside your <map>. You can add events to the Rectangle for things like Tap, you could give them a Fill property to make them a given color, etc.
Related
I have an image control in WPF and want to create highlighting over the image without fading the color of the rectangle when you change the opacity. This is what I want it to look like:
But I'm getting this:
Here is the code I have now.
<Grid>
<Image
x:Name="img"
Stretch="Uniform"
VerticalAlignment="Top"
HorizontalAlignment="Center"
RenderOptions.BitmapScalingMode="HighQuality"
UseLayoutRounding="True"
Source="Images/Doc.bmp" />
<Canvas>
<Rectangle
Width="300"
Fill="Yellow"
Opacity=".5"
Height="100"
Canvas.Top="200"
Canvas.Left="100" />
</Canvas>
</Grid>
What do I need to do to the rectangle to create the effect of the first image?
I am currently working with Windows 10 and Pivot control. I am aware that we can customize the header template by adding an Image or customizing the TextBlock. I know how to customize basic template like following
<Pivot.HeaderTemplate>
<DataTemplate>
<Grid>
<TextBlock Text="{Binding}"
FontSize="22"/>
</Grid>
</DataTemplate>
</Pivot.HeaderTemplate>
This works perfectly fine for basic purpose but I want to achieve an output similar to the following screenshot. Add ellipse for each header and it should at the center of the page.
Can someone suggest whether this is possible or not?
Update
I added a StackPanel like below.
<StackPanel HorizontalAlignment="Center" Grid.Row="1" Orientation="Horizontal">
<Ellipse Fill="Cyan"
Height="10"
Width="10"
Margin="10,0"/>
<Ellipse Fill="Gainsboro"
Height="10"
Width="10"
Margin="10,0"/>
<Ellipse Fill="Gainsboro"
Height="10"
Width="10"
Margin="10,0"/>
</StackPanel>
Now how to assign PivotHeaderForegroundSelectedBrush and PivotHeaderForegroundUnselectedBrush to ellipses?
For designing ellipses on center of page.
Option 1
You can accomplish is by having binding a margin property. This margin property will need to be updated for each resize.
Option2
Else specify a Stackpanel with Orientation as Horizontal, Center aligned and containing ellipses which are updated as soon as Pivot selection changes. You can find a similar control being created by Jerry Nixon Pagination
As for Ellipses Color change you can Create a template for different state, use a trigger or even override current Pivot header templates
<SolidColorBrush x:Key="PivotHeaderForegroundSelectedBrush" Color="Blue" />
<SolidColorBrush x:Key="PivotHeaderForegroundUnselectedBrush" Color="White" />
I'm struggling to get something similiar to what I painted in Photoshop (took over 9000 hours).
Basically our Windows app for tablets needs a control that shows an onscreen grid when clicked. The data genesis and grid preparation occurs in codebehind of the control and I don't know how to draw the grid outside of my control. Even simple popup control would be fine if I could get it outside the parent boundaries.
You could use a flyout:
<Button Width="100" Height="100" Background="Black">
<Button.Flyout>
<Flyout Placement="Bottom">
<Grid Width="200" Height="200">
<StackPanel>
<Rectangle Fill="Red" Width="100" Height="100" />
<Rectangle Fill="Green" Width="100" Height="100" />
</StackPanel>
</Grid>
</Flyout>
</Button.Flyout>
</Button>
also you can prepare your own popup:
How to center a popup in window (Windows store apps)
Is it somehow possible to have somekind of a blurred border when scrolling? For better understanding I added a picture of what I want to acchieve.
The restriction that I have is, that underneath the ScrollViewer I have got a background Image. Thus, I cant just use a filled Rectangle with white to transparent gradient at the left side of the ScrollViewer.
Since WinRT dropped support for OpacityMask and I'm not sure if you'd want to set it with an Alpha channel. With that said though, there's pretty much always a work around. So what if you just utilize the natural z-order instead and fake it? Something like this;
<!-- Grid as Container -->
<Grid>
<ScrollViewer VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Visible">
<!-- example backgrounds, like images, just for the concept example. -->
<StackPanel Orientation="Horizontal">
<Rectangle Height="75" Width="300" Fill="Red" Margin="20,0"/>
<Rectangle Height="75" Width="300" Fill="Red" Margin="20,0"/>
<Rectangle Height="75" Width="300" Fill="Red" Margin="20,0"/>
<Rectangle Height="75" Width="300" Fill="Red" Margin="20,0"/>
<Rectangle Height="75" Width="300" Fill="Red" Margin="20,0"/>
</StackPanel>
</ScrollViewer>
<!-- An adhoc gradient overlay to just float over the ScrollViewer itself.
Then using Margin to fit it to the shape of the Scrollviewer and still
allow hit visibility to the scrollbar etc. -->
<Rectangle Width="50" HorizontalAlignment="Left" Margin="1,1,0,20">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0.1,0.5">
<GradientStop Color="White" Offset="0.3"/>
<GradientStop Color="Transparent" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
Of course you'll probably want to tweak some values like the Rectangle Margin in the example to make it look exactly right with your own setup, but the concept should be there and is an option. Hope this helps.
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?