I want to view a fullscreen video and thought this works like this:
<Window x:Class="test.Overlay"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Overlay" Height="300" Width="300" WindowState="Maximized">
<Grid>
<Canvas Name="lightCanvas" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<MediaElement Name="lightMovie" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Source="C:\knoblauch\lights\1.wmv" Stretch="Fill" />
</Canvas>
</Grid>
but for some reason the video, in this case 1.wmv, doesnt fill up the screen.
Why?
Elements added to a Canvas will not be sized relative to the Canvas. They will be their non stretched size or a size which has been explicitly set (through setting Width, Height, etc). To get items to stretch you need containers that support that functionality suach as a Grid.
For instance:
<Grid>
<MediaElement Name="lightMovie" Source="C:\knoblauch\lights\1.wmv" Stretch="Fill" />
</Grid>
works as you are expecting.
Related
We receive a SVG image path from our model. This image is also used on web and winform, so we cannot use XAML.
Those are only grey-images and we need to be able to set any color for those image. I was wondering if it could be possible to add some kind of color layer that would only set the color of the non-transparent part?
here is what I've now:
<Window x:Class="CustomBrushesExample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:svg1="clr-namespace:SVGImage.SVG;assembly=DotNetProjects.SVGImage"
xmlns:local="clr-namespace:CustomBrushesExample" WindowStartupLocation="CenterScreen"
Title="SVGImage" Height="540" Width="720" Background="Wheat" ResizeMode="NoResize" Margin="3">
<svg1:SVGImage
x:Name="StartingImage" SizeType="SizeToContent"
Source="/CustomBrushesExample;component/Images/test_3.svg"
Margin="20"
RenderTransformOrigin="0.5,0.5"
VerticalContentAlignment="Top"
HorizontalContentAlignment="Left"
HorizontalAlignment="Left"
VerticalAlignment="Top"/>
</Window>
SVGImage is the .net team implementation to show SVG images: https://github.com/dotnetprojects/SVGImage
I have a question about a WPF zooming question. This question is really about a Kinect application, but I have tried to generalise it here.
I have the following XAML:
`<Window x:Class="RenderTransformViewboxTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:RenderTransformViewboxTest"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4*" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Border x:Name="borderContainer" ClipToBounds="True">
<Viewbox x:Name="contentViewbox">
<Grid>
<Image x:Name="imageMoose" Source="Images\Moose.jpg" />
<Canvas x:Name="canvasContainer">
<Rectangle x:Name="TestRectangle" Height="600" Width="200" Canvas.Left="250" Canvas.Top="150" Stroke="Black" Fill="Yellow" Opacity="0.5" />
</Canvas>
</Grid>
</Viewbox>
</Border>
<StackPanel Grid.Column="1">
<Button x:Name="btnZoomToRectangle" Content="Zoom to Rectangle" Click="btnZoomToRectangle_Click" />
</StackPanel>
</Grid>
This looks like this:
I am having trouble writing the correct code to:
Scale the whole Viewbox (the canvas and image) inside the border until the rectangle appears to be at the full height of the border control.
Then, translate the whole Viewbox (the canvas and image) inside the border so that the rectangle appears to be in the centre of the border control.
Since translating the Viewbox may introduce "gaps" on the left/right of the border, I'd like to trim the other side somehow so that there is an equal amount of image on the left and the right hand side of the rectangle.
The result of these steps should make the screen look like this:
Notice how that because the image was translated right, we introduced a gap at the left hand side of the frame. As per requirement 3, I introduce the same amount of gap on the right hand side.
(I apologise for my skills with Paint here).
I've been banging my head against a wall with this for ages and am having trouble. I have sort of managed to scale the image applying a Matrix Transform in the centre of the image but can't seem to do much else with it after! Any help would be gladly appreciated.
I have a WPF Window which contains a Grid. It's set up to look like a Checkers board, so I need the squares of the grid to stay square when the window is resized.
I've tried many things but nothing seems to work. I hope it's just a matter of getting the right attribute, and not something complicated, but I need it to resize proportionally either way.
I'm also not sure if this should happen in the Grid or in the Window. I would assume the Window because that's the controller for resizing, but I could be wrong.
Any suggestions?
xaml for Window:
<Window x:Class="TicTacToeClient.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:TicTacToeClient"
Title="Mini-Checkers V1.1" Height="600" Width="600"
MinHeight="200" MinWidth="200" MaxHeight="600" MaxWidth="600" >
<DockPanel>
<Menu DockPanel.Dock="Top">
<MenuItem Header="Game">
<MenuItem Header="Set Ip Address" Name="IPAddressMenuItem"/>
<MenuItem Header="Set Name" Name="SetNameMenuItem"/>
</MenuItem>
</Menu>
<TextBlock DockPanel.Dock="Bottom" Text ="Status: " Name="GameStatusBar" />
<local:TicTacToeBoard x:Name="GameBoard" />
</DockPanel>
xaml for Grid:
<UserControl x:Class="TicTacToeClient.TicTacToeBoard"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="600" d:DesignWidth="600">
<Grid Name="MainGrid">
<Grid.RowDefinitions>
....
I would suggest DataBinding the Width of your Grid to the Height (or vice-versa). This will make sure that it always grows proportionally. Something as simple as this should work:
<Grid x:Name="Checkerboard" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Width="{Binding RelativeSource={RelativeSource Self}} Path=ActualHeight}">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<!-- Grid Contents -->
</Grid>
And if you want your cells to all remain square, just make sure they're all * sized, so they will be spread out equally.
Alternatively, you can put yor grid inside a Viewbox with Stretch="Uniform"
You can try enclosing yourGameBoard in a ViewBox with Stretch Property set to Uniform and StretchDirection set to Both. like this. It wont keep the Form's Aspect ratio uniform but will keep your GameBoard Proportions Uniform.
<Viewbox Stretch="Uniform" StretchDirection="Both">
<local:TicTacToeBoard x:Name="GameBoard" />
</Viewbox>
I am having a problem with different appearance in Blend/VS2012 IDE and in Debugging.
In IDE, the Rectangle is at the center, but when it is compiled or debugged, the size of the margin is different. In my view, this occurs because the size of the window border is different. I really want to fix this problem. Any suggestions?
Thank You.
XAML
<Window x:Class="WpfApplication2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="202" Width="194">
<Grid HorizontalAlignment="Left" Height="171" VerticalAlignment="Top" Width="186">
<Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="151" Margin="10,10,0,0" Stroke="Black" VerticalAlignment="Top" Width="166"/>
</Grid>
Edited XAML code:
<Window x:Class="WpfApplication2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="202" Width="194">
<Grid HorizontalAlignment="Left" Height="171" VerticalAlignment="Top" Width="186">
<Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Center" Height="151" Margin="10" Stroke="Black" VerticalAlignment="Center" Width="166"/>
</Grid>
Result is the same. Is this problem of my PC?
Your Problem here is Window Size includes the Chrome Size(Window Border and stuff like close/max min buttons).
Your Grid is hence the size you requested but it does not fit in the window size you've requested.
I could fix your issue to make the output window look like this, with Window size:
Width: 202
Height: 210
on Windows 8
However you should rather have your window size set to SizeToContent="WidthAndHeight"
Example:
<Window x:Class="WpfApplication4.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication4"
x:Name="window"
Title="MainWindow"
SizeToContent="WidthAndHeight">
<Grid HorizontalAlignment="Left" Height="171" VerticalAlignment="Top" Width="186">
<Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="151" Margin="10,10,0,0" Stroke="Black" VerticalAlignment="Top" Width="166"/>
</Grid>
</Window>
Your thus not assuming Chrome sizes which might be different from different versions of Windows.
You should also get Snoop. It helps you debug such issues very easily, It shows a red border on a control when you hover on it with Shift+Ctrl, so you can actually see the Grid extend past the visible Window while showing the actual Element Layout of your UI
I'm learning WPF on my own and I can't seem to find a way to make this work.
Here's my code:
<Window x:Class="Test.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Test" Height="600" Width="800" >
<DockPanel>
<Menu DockPanel.Dock="Right"
Height="30"
VerticalAlignment="Top"
Background="#2E404B"
BorderThickness="2.6">
<Menu.BitmapEffect>
<DropShadowBitmapEffect Direction="270" ShadowDepth="3" Color="#2B3841"/>
</Menu.BitmapEffect>
</Menu>
</DockPanel>
How can I make a tiled background image appear?
Set the ViewportUnits to absolute, which will allow you to define the pixel size of your image in the Viewport. In my example the image size is 32x32.
<Window.Background>
<ImageBrush ImageSource="image.png" TileMode="Tile" ViewportUnits="Absolute" Viewport="0,0,32,32"/>
</Window.Background>
Or, perhaps, you could use Visual Brush:
<Window
x:Class="Test.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Test" Height="600" Width="800">
<Window.Background>
<VisualBrush TileMode="Tile" Viewport="0,0,0.5,0.5">
<VisualBrush.Visual>
<Image Source="image.png"></Image>
</VisualBrush.Visual>
</VisualBrush>
</Window.Background>
</Window>
The Viewport property sets the position and dimensions of the base tile. Have a look at examples here.
Basically, "0,0,0.5,0.5" means that the base tile will take space from point (0,0) to (0.5,0.5) - i.e. from the upper left corner of the output area to centre. (1,1) is the lower right corner. You should make use of MSDN Library. It's really useful. All the answers are there.