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.)
Related
My question is pretty straight forward:
How do I achieve an Overlay Pop-Up effect using avalonia?
What I mean by this is I want to darken the whole Panel that contains my UI elements a little bit (tried the opacity attribute, but it didn't look good and the OpacityMask only seems to support "Transparent" as a color, but I want semi-transparency or even blur if that's possible). Then I want to display a little popup box. If this were CSS I'd be able to do a position: absolute;, however I couldn't figure out how to do this using avalonia.
To visualize what I mean here are some screenshots of a Windows Forms Application where I was able to achieve the desired effect:
My UI without overlay effect:
My UI with overlay effect:
As you can see the whole UI has been darkened a bit while the background is still visible (when using the avalonia Opacity property the effect is not the same and quite inconsistent, as the more panels are on top of each other on a given position the less the background seems to be affected by the Opacity and it just doesn't look good. I can add screenshots of how bad it would look later if you want.)
To sum it up:
1. How do I slightly and consistently darken (or even blur?) a panel with all of its contents, so that stacked panels with the same background color don't become visible, just because the transparency is acting weird?
2. What is the avalonia equivalent to the CSS position: absolute; so I can put my Pop-Up in the middle of the screen and on top of everything else?
You can use the same technique as in WPF:
<Window>
<Grid>
<DockPanel x:Name="YourMainContentGoesHere"/>
<Border IsVisible="{Binding IsPopupVisible}" Background="#40000000">
<YourPopupControlHere Width="200" Height="200"/>
</Border>
</Grid>
</Window>
Unconfigured Grid will display elements on top of each other, semi-transparent Border's background will darken the rest of the content.
I'm trying to change the width of the scroll bar of a WebBrowser control.
I tried following this answer to change its ScrollViewer like this:
<WebBrowser Grid.Row="0" Grid.RowSpan="5" Grid.Column="0" Height="1993" Margin="3,3,0,3">
<ScrollViewer>
<ScrollViewer.Resources>
<sys:Double x:Key="{x:Static SystemParameters.VerticalScrollBarWidthKey}">100</sys:Double>
</ScrollViewer.Resources>
</ScrollViewer>
</WebBrowser>
But I'm getting The type 'WebBrowser' does not support direct content error.
I know that the WebBrowser of WPF is just a wrapper around WinForm's so I'm guessing this is why I'm getting this error.
I don't want to use external components such as CefSharp or other browsers.
Is it possible using the native WebBrowser?
Thanks
The WPF WebBrowser control actually wraps the native WebBrowser ActiveX control inside it. That doesn't really change the answer but it's good to know.
As Reza Aghaei already commented, the scrollbars are not WPF controls and cannot be modified like other scrollbars in WPF applications. However, I don't think that you can change the width of the IE scrollbars using CSS, because the styling is only limited to coloring:
scrollbar-base-color: #C0C0C0;
scrollbar-base-color: #C0C0C0;
scrollbar-3dlight-color: #C0C0C0;
scrollbar-highlight-color: #C0C0C0;
/* etc */
Two possibilities come to mind. Either you use one of the jQuery scrollbar libraries that let you customize the scrollbar, or you use the native WPF ScrollBar instead.
Using jQuery scrollbars would force you to inject javascript on each page the user visits and it might get really dirty when the website already has custom jQuery scrollbars in use. This could be worth looking into, but I doubt it would work well enough in practice.
Here's what I would try
Hide the scrollbar by giving overflow:hidden style to the body of each page. You could also host the Windows Forms WebBrowser inside the WindowsFormsHost control so you would get access to the ScrollBarsEnabled property (which unfortunately isn't available on the WPF control).
Add the WPF ScrollBar next to your WebBrowser control and style it the way you want to. This could actually be a UserControl to ensure future reusability.
Set the WPF ScrollBar's maximum value to the ScrollHeight of the HTML page.
Subscribe to the scroll event of WPF ScrollBar. Send the scroll events to the HTML page. You would also need to do it the other way to keep the WPF ScrollBar synced with scroll that happens using touch, mouse wheel or keyboard buttons.
I'm not on a computer right now so can't help with the numbers 3 and 4 but it should certainly be possible. Again you could run into pages that use some custom scrolling (jQuery) but hopefully this gets you started.
I am developing Windows store apps. In one of the apps, instead of having image controls, I would like to have container controls that display single animated images from within (Similar to the News Bento app welcome screen on Windows 8). The closest I have come to that is AnimatingContainer control from WinRT XAML toolkit, but it doesn't seem to work with images (At least in my case). Any help on how to use this control to animate an image or any other solution will be grateful. Below is my XAML code. If I uncomment the text block and comment the image, the text block is displayed animated. But the reverse isn't true.
<Controls1:AnimatingContainer HorizontalAlignment="Left" Height="311" Margin="163,23,0,0" RadiusX="25"
RadiusY="10"
Duration="0:0:10"
VerticalAlignment="Top" Width="461">
<!--<TextBlock Text="Sume Rossini" FontSize="66"/>-->
<Image Source="Assets/Davy_Jones.jpg" Width="300" Height="500"/>
</Controls1:AnimatingContainer>
There likely isn't any. You would need to write one yourself to fit your specific requirements. Use Blend to create the animation. Ask more specific questions and you may get help implementing it.
I want to create an app that is somewhat of an iPhone emulator (and by emulator I mean user control that looks like a picture of an iPhone but it's still just all .NET under the hood).
I just want to use it to demonstrate/prototype some ideas and see how it would look on the phone and could demonstrate it's functionality to others. Why WPF? Because I'm a .NET developer and I don't want to spend much time on learning something I may never use.
Does anyone know if a control like this exists? Or a pre-made style?
Thanks!
If you just want an iphone picture and then the ability to put arbitrary controls inside of it, do something like this inside your XAML:
<Grid>
<Grid.Background>
<ImageBrush ImageSource="iphone.png" />
</Grid.Background>
<Frame Name="sourceFrame" Source="springboard.xaml" Margin="left,top,right,bottom" />
</Grid>
iPhone.png needs to be a picture of the iphone. You can find these readily available on the internet. Open the image in a picture editor and find the distance to the left side of the actual screen and put that in the margin for left. Do the same for top, right, and bottom. Then just create springboard.xaml, and you're set.
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