There is a Canvas in our application where an image is loaded. We need to provide buttons such as "Add Placemark" on top right corner of the image such that the button highlights on focus.
There are PNG files for these controls. How can I make these PNG behave as buttons (change visual state on hover, onclick etc). I tried to add <Image> in <Button>, but it shows the opaque button on top of the Canvas.
<Button Height="23" HorizontalAlignment="Right" Name="btnAddPlacemark" Margin="3" VerticalAlignment="Top" Width="23" Click="btnAddPlacemark_Click">
<Image Source="/Map_SL;component/Images/PlaceMark.png" Stretch="Fill" />
</Button>
Sounds like you are going to recreate all the logic of a button, simply to remove the border/background. Remember every control in Silverlight is simply skinned and therefore infinitely configurable.
You do want to use a normal button with an image, then restyle the button to remove the parts you don't want. I realise this seems daunting at first, but there are simplified basic skins available to simplify that task, or you can use Expression Blend (if you have access to it or can afford it).
Try this link from the master himself:
http://weblogs.asp.net/scottgu/pages/silverlight-tutorial-part-7-using-control-templates-to-customize-a-control-s-look-and-feel.aspx
Related
I have a grid, which has 2 rows and 3 columns.
I need 2 background images for my grid - one will be on the top of the other. (ZIndex of one background should be bigger than other background has). How can I achieve this?
I will need to swap these 2 backgrounds frequently, which means the top background will become lower background and lower background will become top background. Apart from that, images of these two backgrounds are gonna change a lot too.
This example has grid, which contains text switcher at the bottom. As a background, it has a picture of room. When I click 'next' button in the text switcher, I want the top background picture to gradually disappear (doubleAnimation updates opacity) and show lower background under it. Maybe I can achieve gradual switching of backgrounds in a better way, but I honestly dont know how to do it.
You can draw them as two images on a Canvas inside a VisualBrush and use that as your background:
<Grid>
<Grid.Background>
<VisualBrush>
<VisualBrush.Visual>
<Canvas Width="256" Height="256">
<Image Source="image1.png" Panel.ZIndex="1" /> <!-- This will appear over top of the other one -->
<Image Source="image2.png" Panel.ZIndex="0" />
</Canvas>
</VisualBrush.Visual>
</VisualBrush>
</Grid.Background>
</Grid>
Source and Panel.ZIndex can then be set either directly in code-behind or via data binding.
This is a bit of an unsual way of going about this though, there's almost certainly a better way of doing whatever it is you're actually trying to do.
In this case I would use databinding to bind to a property in the view model that stores the background image. When the condition changes and the view model property is changed the UI will reflect those changes.
I spent a long time looking for a way to make a boring WPF button be a little more interactive, and behave like a WinForms button, without having to implement that functionality myself. Here is an example of what I want:
Classic WPF button:
Windows 10 Winforms button:
I even tried using WindowsFormsHost to add a WinForms Button to my WPF application like this:
<WindowsFormsHost Grid.Row="0" Grid.Column="0" Width="50" Height="20" HorizontalAlignment="Right" VerticalAlignment="Bottom">
<win:Button Text="Click" Left="50" Top="50" Size="50,20"/>
</WindowsFormsHost>
But it appeared in a gray, old style:
How can I add Windows 10 interactivity to my WPF buttons (like in Winforms), without having to implement that functionality myself?
Update:
By "more interactive" I mean to have a thick blue border when in focus, and behave with smooth transitions, like a Windows 10 system button.
By "more interactive" I mean to have a thick blue border when in focus, and behave with smooth transitions, like a Windows 10 system button.
It's just a matter of styling. Fancy things will require you to override the Template in the style. To do transitions one usually uses the VisualStateManager. (Most controls already have some pre-defined states, so you do not need to invoke VisualStateManager.GoToElementState yourself. The button states along with a usage example style can be found here.)
Inspired by this question I'll complicate that issue.
My goal is a circle button (with background image like that ) whick performs like "start-stop" button:
1) first time clicking changes button image to "stop" image and starts some calculating function (Process, Task, etc.)
2) enother click changes button image to the original "start" image and stops that function.
Button code is like:
<Button x:Name="btnStartStop" Width="72" Height="72" Content="" Margin="180,0,372,94" VerticalAlignment="Bottom" d:LayoutOverrides="VerticalAlignment">
<Button.Template>
<ControlTemplate>
<Grid>
<Ellipse>
<Ellipse.Fill>
<ImageBrush ImageSource="Images/Start.jpg"/>
</Ellipse.Fill>
</Ellipse>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
Thank you.
P.S. #Sheridan asked to mention his name, maybe he can help me.
UPDATE My button looks EXACTLY like my background image - it is round with no border and clickable area matches image (it is round). Everything outside that round image is transparent and doesn't fire click event. That's why I have to use Ellipse.
You can use DataTrigger for change background image of button. below is the link may help.
WPF Change button background image when clicked
and below is solution for the same. working proper my end as per your need.
This actually sounds like a perfect use-case for a ToggleButton or maybe even a custom CheckBox.
You can provide your own control template that uses the two different images/graphics for the two different toggle states. Using VisualStateManager you can declare what to do during the transitions.
I am developing a Windows Store app and I've done this before, months ago, but all of a sudden, in this new app, I can't get the image to display inside the button (properly).
<Button x:Name="ShowView" Grid.Column="1" Width="32" Height="32" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,61,20,33">
<StackPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Image x:Name="ShowViewImage" Source="/Assets/ShowView.png" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</StackPanel>
</Button>
As you can see, the code is fine (unless things have changed drastically, which by the looks of it they haven't). So what gives? This is the only code I have so far in my XAML file other than the defauls that VS generates as it's a new Project.
P.S. I've also tried taking out the StackPanel and just having Button > Image, but this produces the same result.
So, when the BUtton displays at runtime, all I can see is a very tiny, 2pixels of the image (but the image is actually 32x32pixels. How do I properly display an "Image Button"?
The problem is that your Width and Height for the button are far too small. You've made it 32x32 pixels, but the button will use almost all of that itself for the space it leaves around the visible border, the border itself, and the padding between the border and the button's content.
(It leaves space around the edge to provide a larger hit target than the visible appearance. This is useful on touchscreens, where accurate finger placement is difficult.)
All that's left for your image is a few pixels.
You'll need to make the button about 62x52 pixels to leave enough space in the middle for a 32x32 pixel bitmap.
You could get away with a slightly smaller button if you explicitly set smaller Margin and Padding properties, although as mentioned above, the margin is there for a reason.
You have a couple options, the Padding property for instance is Template bound with some pre-set padding added to it. So with your Button having a fixed Height and Width set to 32 something as simple as setting Padding="0" could fix it for you depending on the actual size of your Image.
If worse comes to worse though, you could always just make your own Button Template. There's a couple easy ways to do this. One of which would be just go make a copy of the default Button Template, rip out all the Padding/Margin/Height/Width crap preset in there and just change its name then apply your new template directly to your button like;
<Button x:Name="ShowView" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,61,20,33"
Style="{StaticResource YourCustomButtonTemplateForImages}">
<Image x:Name="ShowViewImage" Source="/Assets/ShowView.png"/>
</Button>
Or... another option would be, embed your Image inside of a ViewBox inside your button and it will fit and re-scale itself accordingly to its set available size.
Oh, you might also want to make your Background="Transparent" while you're at it to make it look a little cleaner as just an image.
Hope this helps.
I have a path defined as such:
<Viewbox Visibility="Collapsed" x:Name="Tick" Grid.Column="1" Grid.Row="1">
<Canvas MaxWidth="100" MaxHeight="100" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="100" Height="100" Canvas.Left="0" Canvas.Top="0">
<Path ...Fill="#FF00B800" x:Name="MyPath" (path dimensions, lines, etc) .../>
</Canvas>
</Viewbox>
Now what I'd like to do is manipulate fill such that it will cause the path to have a fade in/fade out effect. Basically make fills alpha component either move towards opaque or transparent based on whether or not the viewbox the path is inside is Visible. So when visible the path fades in, when collapsed the path fades out.
The effect you are trying achieve is a classy one but there is a serious problem with your current plan. When the Visibility of a higher-level element, Viewbox in this case, is set to Visibility.Collapsed, the element and all sub-elements are immediately no longer visisble. It is at this point that you want the fade-out of the Path to begin.
So the Path is already not visible and starting an animation to gradually reduce its opacity will no do any good because it is already gone. In other words, by the time the visibility is set to Visiblity.Collapsed, it is too late to do anything useful with things inside the element because the user won't see them. If you could, you would want to see into the future and know that you are going to change the visibility and start an animation so that it finishes before you "close the curtain" on the element.
The same problem doesn't apply to when we make the element visible because everything is perfect: we become visible and start the fade-in animation. But since half of the effect is not going to work, we still have a big problem.
The solution to this problem is move up a level and see what we're trying to do. In the XAML we only have passive elements, Viewbox, Canvas, and Path. But maybe these are acting more like controls or assisting controls, for example being the check for a CheckBox or a checkbox-like control.
A control can have states:
Normal, MouseOver
Pressed, Disabled
Unfocused, Focused
and those states can have transition effects, thanks to the VisualStateManager.
So if the fade-in and fade-out effects are part of control behavior, then we have a whole sophisticated powerful toolset available to solve our problem. I don't know if this is the case in your situation.
Even if it is not the case, a very workable approach to transition effects on Silverlight is to transform your elements into a lookless control, solely for the purpose of utilizing the VisualStateManager, because it makes things so easy. Perhaps this alternative can work in your situation.