I have an image that I want various parts of to be clickable. I found a comment in the question below mentioning this was possible with Expression Designer. I haven't been able to find a guide on how to do this. I understand that I have to export the image from Designer to Visual Studio. Is there a better way of achieving this or how do I go about creating the xaml for these clickable sections?
best way for clickable image map in wpf
Personally I'd use the second answer to that question i.e. do something like this:
<Canvas>
<Image Source="background.png"/>
<Ellipse Canvas.Left="82" Canvas.Top="88" Width="442" Height="216" Fill="Transparent" Cursor="Hand" MouseDown="Ellipse_MouseDown_1"/>
<Ellipse Canvas.Left="305" Canvas.Top="309" Width="100" Height="50" Fill="Transparent" Cursor="Hand" MouseDown="Ellipse_MouseDown_2"/>
</Canvas>
Then you can drag and resize the shapes in DevStudio using it's XAML editor's design mode.
Related
I've followed some examples trying to layer a rectangle over the WebBrowser object:
Here is the MSDN example link. (I got it to work)
Layers issue using Z-Index
Here is the code I'm trying to get to work:
<Grid>
<Canvas Margin="2,4,0,-450" >
<Rectangle Height="452" Canvas.ZIndex="1000" Name="rectangle1" Stroke="Black" Width="524" Opacity=".5" Fill="#8CBABABA" Canvas.Top="-7" Canvas.Left="-3" />
<WebBrowser Name="mapBrowser" Canvas.ZIndex="999" Margin="5,5,5,5" Height="452" Width="516" Canvas.Top="-11" />
</Canvas>
</Grid>
I'm trying to make the WebBrowser appear grayed out by making the rectangle appear over top of it. I'll also disable it.
Can anybody point to what I'm doing wrong?
I solved this issue by creating a .png image which I placed in the same space as the webbrowser. It looks like a grayed-out version of what first appears in the webbrowser. Then I conditionally hid the webbrowser which makes the image visible. This is the only way I've found to make it work using .Net 4.0.
For our .NET project this year we have to create a website in Silverlight.
Now I have been getting along nicely utilizing the grid, making gridrows and colums, but I have got to the part where I have to create navigation buttons.
So I decided to go for the following look of the buttons:
Now, when I add a button to my project and I give it the background of that image, this happens.
I have looked at other methods to create an image button but those involve putting an image INSIDE the button using a stackpanel. I tried that and it looks really bad.
This is the code the button generated:
<Button Content="Button" Height="40" Name="button1" Width="125">
<Button.Background>
<ImageBrush ImageSource="/OndernemersAward;component/Images/button.png" Stretch="Fill" />
</Button.Background>
</Button>
I don't know what's going on here and I hope somebody can help me.
Thanks, Thomas
Putting an image inside the button is the best way to go. You can just have an image inside a button, or you could put a StackPanel inside and arrange other content as you see fit. You can also get rid of the border and background brushes on the button so that it is just your image and nothing else. Try this code:
<Button Height="40" Name="button1" Width="125" BorderBrush="{x:Null}" Background="{x:Null}" IsHitTestVisible="False">
<Image Source = "/OndernemersAward;component/Images/button.png"/>
</Button>
That will make a button that is just your image with no other borders, or colors. You can tweak the other settings as you see fit. Note that in order to use the image as the button, you have to delete the Content tag, since the inside of the <Button> takes the place of it.
I ultimately solved this by using blent. I created an image and there is a control there that can transform the image to a button.
My Question :
How to build custom layout for controls like above pictures ?
by Microsoft Expression Blend ?
How ?
Please Direct me to the right article or discuss what you have
Expression Blend 4 has some built-in shapes that could help you out here. Basically, you want to re-template a TextBox control to contain the speech bubble shape instead of a standard Border.
Alternatively, you could do this without re-templating. Something like this:
<UserControl xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing" Margin="100">
<ed:Callout AnchorPoint="-0.13,0.29" CalloutStyle="RoundedRectangle" Fill="#FFF4F4F5" Stroke="Black">
<ed:Callout.Content>
<TextBox BorderThickness="0" Background="Transparent">Hello</TextBox>
</ed:Callout.Content>
</ed:Callout>
</UserControl>
By the way, did you really mean TextBox, or do you actually mean TextBlock? If the latter, all you need is:
<ed:Callout AnchorPoint="-0.13,0.29" CalloutStyle="RoundedRectangle" Fill="#FFF4F4F5" Stroke="Black" Content="Hello"/>
I'm trying to put a rounded border on a control which is hosted through a WindowsFormHost object. It seems like no matter what I set for OpacityMask, it has no effect on the rendering. Is there something I've missed?
Here is the XAML code I am using. The child control is added at run-time. I've tried various combinations of masks, none of which worked for me. Any help would be appreciated. Thanks!
<WindowsFormsHost Background="#FF2BBA62" Height="414" Width="516" Margin="176.5,223,309.5,92" Name="vcxHost1" UseLayoutRounding="False" ClipToBounds="True" >
<WindowsFormsHost.OpacityMask>
<VisualBrush>
<VisualBrush.Visual>
<Rectangle Height="10" Width="100" Name="border1" />
</VisualBrush.Visual>
</VisualBrush>
</WindowsFormsHost.OpacityMask>
</WindowsFormsHost>
I suspect it doesn't work for the same reason that the z-indexing doesn't work. From the linked doc: "A hosted Windows Forms control is drawn in a separate HWND, so it is always drawn on top of WPF elements."
See the paragraph on Layout Limitations ...
http://msdn.microsoft.com/en-us/library/ms744952.aspx
This may also be helpful ... http://msdn.microsoft.com/en-us/library/ms742522.aspx
I would like to be able to place the word "hello" centered on a specific point. I need to do this completely in XAML without extra code. Best I can tell, all the text alignment properties/styles in XAML act on text within some bounding canvas or other element.
Since I don't know the length of the text I want to center, I can't center it using my own code.
The reason I need to solve the problem entirely in XAML is that I'm not using WPF to create the XAML, I'm writing it directly to an XML DOM. It will then be loaded into a Silverlight or WPF control for display.
In most graphic languages, including SVG, which is where my code originated, text can be aligned against a "stationary point" without a bounding box.
Any suggestions appreciated
(Yes, I know this question is old.)
The effectiveness of this solution may vary with the version of Silverlight or the .NET Framework you are using, and I haven't tried it with Silverlight for Windows Phone 7. I wrote a version for stand-alone WPF applications, and I wrote another version that also works in Silverlight.
First, the version that works in Silverlight and WPF. Please note that you will need to refactor the code a little bit if you aren't using a Canvas to provide an absolute position for the center of your TextBlock. For example, you may be using a TranslateTransform to position your text.
<Canvas>
<Canvas.Resources>
<ScaleTransform x:Key="transform" ScaleX="-1" ScaleY="-1" />
</Canvas.Resources>
<Grid RenderTransform="{StaticResource transform}" RenderTransformOrigin="-.25 -.25">
<TextBlock RenderTransform="{StaticResource transform}">
Hello!
</TextBlock>
</Grid>
</Canvas>
Second, the version that works only in WPF. It doesn't work in Silverlight because it depends on the presence of the Canvas.Right and Canvas.Bottom attached properties. UniformGrid isn't in Silverlight either, but that code could have been replaced by a regular Grid with 2 star-length rows and columns.
<Canvas>
<UniformGrid Rows="2" Columns="2"
DataContext="{Binding ElementName=textBox1}"
Width="{Binding Path=ActualWidth}"
Height="{Binding Path=ActualHeight}">
<Canvas>
<TextBlock Name="textBox1" Canvas.Right="0" Canvas.Bottom="0">
Hello!
</TextBlock>
</Canvas>
</UniformGrid>
</Canvas>
By the way, there may be more efficient ways to solve this problem available. I am making no guarantees!