I want to do something similar to Microsoft Powerpoint: I want to capture the current screen (or one grid from the current window), and then to set it as the content of the button (like powerpoint where there is a preview of the slides at the side bar).
What is the best way to do that? My current idea is to save it to PNG and then reload it as an image at the content of the button, but I'm sure there is a better way.
Thank you!
Try this:
<Grid>
<Viewbox
x:Name="Viewer"
Stretch="Uniform"
DataContext="{Binding ElementName=Thumbnail1, Path=Data}">
<Grid Width="224" Height="168" SnapsToDevicePixels="True" Margin="4,0,4,0">
<Grid.Background>
<VisualBrush Stretch="Uniform" TileMode="None" Visual="{Binding}" AlignmentY="Center"/>
</Grid.Background>
</Grid>
</Viewbox>
</Grid>
I was using saving as PNG approach in the beginning. Then I have found out the way as above. DataContext of the ViewBox is a canvas. I could create live previews of my screens this way however my screens were canvas objects.
Related
I'm trying to use the split button control described here:
http://mahapps.com/controls/split_dropdownbutton.html
I'm also using the MahApps resource pack with the icons collection. I want to re-size the control to a height of 40px, but the icon stays to its native height of 76px, resulting in it getting cropped, as shown below.
Any ideas how to get around this?
The SplitButton from MahApps.Metro has a property called IconTemplate. To this property you can assign a DataTemplate and there you can add almost arbitrary content, which will be put in place of the icon itself.
For example you could put a Rectangle control with fixed Height and/or Width. And setting its OpacityMask to your desired icon, will show the icon in smaller size.
In XAML it looks like this:
<controls:SplitButton Orientation="Horizontal">
<controls:SplitButton.IconTemplate>
<DataTemplate>
<Rectangle VerticalAlignment="Center" Height="35" Width="35" Fill="{DynamicResource BlackColorBrush}">
<Rectangle.OpacityMask>
<VisualBrush Visual="{StaticResource appbar_globe}" />
</Rectangle.OpacityMask>
</Rectangle>
</DataTemplate>
</controls:SplitButton.IconTemplate></controls:SplitButton>
controls is the alias for the MahApps.Metro-namespace and may differ in your project.
Currently i am designing WPF application using MahApps.Metro style UI.
Tile control which provided by MahApps can not showing icon in center of tile
I saw example in MahApps website where it could show image as tile background, but I couldn't figure out how to show icon instead of image (icon such as IE logo, people logo, maps logo, etc)
I appreciated if someone can show me how to do this
Thank you
i figure it out
use icons.xaml as resource, and add rectangle control inside tile, here is the example on how to show character inside tile control
<Controls:Tile x:Name="mahTileExit" Background="Green" Foreground="Yellow" Title="Exit" Width="100" Height="100" TiltFactor ="4" Margin="936,404,0,0" VerticalAlignment="Top" HorizontalAlignment="Left">
<Rectangle Fill="White" Height="45" Width="45">
<Rectangle.OpacityMask>
<VisualBrush Visual="{StaticResource appbar_door_leave}" Stretch="Fill" />
</Rectangle.OpacityMask>
</Rectangle>
</Controls:Tile>
thank you if anyone notice about this, hope can help to contribute
You can use FontAwesome.Wpf which has more icons and requires less code.
<Controls:Tile Width="300" Height="150" Grid.Column="0" Grid.Row="1" Title="Hello!">
<Grid Width="50" Height="50">
<fa:ImageAwesome Icon="Flag" Foreground="#FFFFFF"/>
</Grid>
</Controls:Tile>
Don't forget to call the namespace
xmlns:fa="http://schemas.fontawesome.io/icons/"
How can I create a non-circular magnifying glass in WPF? This has to work on controls not just an image. Every example I find online is either circular only or only works on images.
For example I have a slider, and I'd like to turn the thumb into a rectangular magnifying region to show enlarged ticks (as my ticks are displayed in the Slider track itself, not below it). I have created all the styles necessary I am just missing the ability to magnify contents underneath the thumb (as the thumb sits on top of the controls / display)
<Slider Ticks="{Binding MyCollection}" />
Thanks
It's pretty easy to just make your own 'magnifying' control. You could use a VisualBrush with a Visual property taken from the source (that you want to magnify) painted onto a plain Rectangle. See the Using VisualBrush to Show a Magnifying Glass page on the Ian G on Tap website as an example.
Better yet, here is a very simple example of a VisualBrush that is painting a Rectangle in the right column of a Grid, magnifying an Image from the left column of a Grid. You can tweak it to your liking:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Image Name="Image" Source="Images/BlackLogo.ico" Width="150" Height="150" />
<Rectangle Grid.Column="1">
<Rectangle.Fill>
<VisualBrush Visual="{Binding ., ElementName=Image}"
Viewport="50,100,300,300" ViewportUnits="Absolute" />
</Rectangle.Fill>
</Rectangle>
</Grid>
I am using the Microsoft.Maps.MapControl.WPF dll in c# WPF.
Here is my issue in the picture below:
I use a custom template for the pushpin because I need to display some simple information for it. There is no infobox in the WPF version to my knowledge.
Clustering the pushpins together in one is not an option for me, because the pushpins represent a delivery location which needs to be displayed on the map. Zooming out is not an option for me because there could be a delivery on the other side of town which all need to be displayed by a bounding box including all pushpins.
Here is the code for my custom pushpin template:
<ControlTemplate x:Key="RedPushPinTemplate" TargetType="m:Pushpin">
<Grid >
<TextBlock Name="textBlock1" Text="{TemplateBinding Content}" Canvas.ZIndex="2" Height="75" Width="65" TextWrapping="Wrap" Grid.Column="0" Grid.Row="0" Foreground="Black"></TextBlock>
<Rectangle Width="35" Height="50" Margin="0 35 0 0" Canvas.ZIndex="1">
<Rectangle.Fill >
<ImageBrush ImageSource="pack://application:,,,/Images/redpin.jpg"/>
</Rectangle.Fill>
</Rectangle>
</Grid>
</ControlTemplate>
My question is, is there anyway to write code for the template that detects an overlap and do something nice to display the information for both pins. Better yet, is there an infobox control that someone is aware of that has this functionality built in?
Thank you very much for your time.
Sorry for the late answer.
How many Pushpins do you have? One Possiblity is to compare the List of Items (X&Y Coordinates + Radius) to find out which Pushpins Intersect eachother. Then you can adjust the X value and interate again.
You can also do this on the control level itself attaching a behavior which is constantly looking for pushpins and then see if they intersect.
How can I create the effect similar to Windows Phone's MessageBox, where the message gets displayed on a new layer with transparent background, so that the windows becomes modal? My layout is created out of Grid, so I do not know how to add any content over it. Please help.
It's easy to overlay one set of content with another in WPF. Try changing the visibility of the border below, for a simple message box effect. You would of course bind Visibility to your view model, or set it in code behind.
<Grid>
<Grid>
<!-- All your layout here -->
</Grid>
<Border Height="100" Width="100" Background="Azure" Visibility="Hidden">
<TextBlock Text="Hi there" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</Grid>