Here is my code:
<Window x:Class="WPFStackOverFlow.SkewWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
AllowsTransparency="True" WindowStyle="None" Background="Transparent"
Title="MainWindow" Height="600" Width="687">
<Border BorderBrush="Green" BorderThickness="2" Background="White" Width="360" Height="360">
<Border.RenderTransform>
<SkewTransform AngleX="-23" AngleY="10"></SkewTransform>
</Border.RenderTransform>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="23" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Button Grid.Row="0" Content="X" Width="23" Name="button1" HorizontalAlignment="Right" Click="button1_Click" Height="23" VerticalAlignment="Bottom"/>
<Grid Grid.Row="1">
<Button Height="100" Width="200"></Button>
<TextBlock Text="Some very very long Text" HorizontalAlignment="Center"/>
</Grid>
</Grid>
</Border>
When I move the mouse cursor over the button sometimes it get focus and sometimes it doesn't. How can I make the button inside this custom window to be like a button in a regular window?
I don't think you can apply transformations to windows.
You can apply them to the controls inside windows.
If you need to simulate transformations to windows you can try something similar to what is described in the answer to this question.
Related
I am doing a feasibility study to find out whether and how we can integrate a Forms application into a WPF project.
I started with a simple example and immediately encountered a problem (here is the code):
<Window x:Class="TestFormsIntegration.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:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms"
xmlns:local="clr-namespace:TestFormsIntegration"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="*"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Label Grid.Row="0" Content="Menue Bar" HorizontalContentAlignment="Center" Background="BlanchedAlmond" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<ScrollViewer x:Name="scrollViewer" Grid.Row="1" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="200" />
<RowDefinition Height="200" />
<RowDefinition Height="200" />
<RowDefinition Height="200" />
</Grid.RowDefinitions>
<WindowsFormsHost Grid.Row="0" HorizontalAlignment="Center" Height="190" VerticalAlignment="Center" Width="250">
<wf:Button Text="Button 0" Height="180" Width="200" BackColor="Gray" />
</WindowsFormsHost>
<WindowsFormsHost Grid.Row="1" HorizontalAlignment="Center" Height="190" VerticalAlignment="Center" Width="250">
<wf:Button Text="Button 1" Height="180" Width="200" BackColor="Gray"/>
</WindowsFormsHost>
<WindowsFormsHost Grid.Row="2" HorizontalAlignment="Center" Height="190" VerticalAlignment="Center" Width="250">
<wf:Button Text="Button 2" Height="180" Width="200" BackColor="Gray" />
</WindowsFormsHost>
<WindowsFormsHost Grid.Row="3" HorizontalAlignment="Center" Height="190" VerticalAlignment="Center" Width="250">
<wf:Button Text="Button 3" Height="180" Width="200" BackColor="Gray" />
</WindowsFormsHost>
</Grid>
</ScrollViewer>
<Label Grid.Row="2" Content="Status Bar" HorizontalContentAlignment="Center" Background="Wheat" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</Grid>
</Window>
In a grid with 4 rows I place 4 forms buttons. When I run the code, the inner grid crosses the boundaries and overwrites the labels at the top and bottom (indicating Menu and Status Bar) and takes up the height of the entire window.
Does anyone know this behaviour and how to fix it?
Hint: Try a larger value for height (you have Height="450"), because the sum of the height of your elements is just higher (200 * 4) and don't forget the labels.
I have found the solution here:
WindowsFormsHost ZOrder
Here I read:
In a WPF user interface, you can change the z-order of elements to control overlapping behavior. A hosted Windows Forms control is drawn in a separate HWND, so it is always drawn on top of WPF elements.
But this article also contains an answer with a solution!
You can do a little trick. When you declare an WindowsFormsHost, it's parent is first HWND component. Usually it's root window. So, clip area for controls is whole window.
But there's a way to create "intermediate" HWND item to clip WinForms area over ScrollViewer. Just place another WindowsFormsHost with ElementHost.
Thank you for your answer, ds1709.
I have a third party WPF application I am creating for Windows that I need to be resizable.
I have gotten it to resize (proportionally) with the grip but cannot get everything else to work correctly in regards to anchor/layout ect. The buttons would not align correctly with the background no matter what I did.
I'm wondering if there is an easier way to simply resize the whole application and all the contents via the grip. It would look like you would be resizing the photo below.
I have a window, grid (with background) buttons and text. Below is a screenshot of the iOS version of the app. The program will continue to be a 4:3 ratio.
Seems most of this is straightforward WPF, apart from the requirement to keep the buttons square as the window is resized horizontally or vertically. Ideally we would force a horiz resize to force the height, and vice versa, but a bit of googling seems to indicate this is surprisingly difficult to achieve with pro-looking results. So far this xaml is the best I've come up with. Try it with and without the viewbox:
<Window x:Class="WpfApp1.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:WpfApp1"
mc:Ignorable="d"
Title="MainWindow" Height="260" Width="260">
<Viewbox Stretch="Uniform">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Button Content="Button" Margin="4"/>
<Button Content="Button" Grid.Column="1" Margin="4"/>
<Button Content="Button" Grid.Column="2" Margin="4"/>
<Button Content="Button" Grid.Row="1" Margin="4"/>
<Button Content="Button" Grid.Column="1" Grid.Row="1" Margin="4"/>
<Button Content="Button" Grid.Column="2" Grid.Row="1" Margin="4"/>
<Button Content="Button" Grid.Row="2" Margin="4"/>
<Button Content="Button" Grid.Column="1" Grid.Row="2" Margin="4"/>
<Button Content="Button" Grid.Column="2" Grid.Row="2" Margin="4"/>
</Grid>
</Viewbox>
I was dragged the controls on the form and when i run it and maximized the window the controls don't keep on the same place which i put it on.
how to keep controls in the same place when the window is maximized ??
this is the XAML code:
<Window x:Class="Wpf_App1.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:Wpf_App1"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.Background>
<ImageBrush/>
</Grid.Background>
<Grid HorizontalAlignment="Left" Height="319" VerticalAlignment="Top" Width="517">
<Image x:Name="image" HorizontalAlignment="Left" Height="319" VerticalAlignment="Top" Width="517" Stretch="Fill" Source="C:\Users\Moath\OneDrive\Documents\Visual Studio 2015\Projects\Wpf_App1\Wpf_App1\Images\LoginScr.jpg"/>
<Grid HorizontalAlignment="Left" Height="52" Margin="310,112,0,0" VerticalAlignment="Top" Width="122">
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<TextBox x:Name="textBox" HorizontalAlignment="Left" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Height="16" Width="120
" Margin="0,10,0,0" >
<TextBox.Background>
<ImageBrush Stretch="None"/>
</TextBox.Background>
</TextBox>
<TextBox x:Name="textBox1" HorizontalAlignment="Left" Margin="0,10,0,0" Grid.Row="1" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Height="16
" Width="120
" >
<TextBox.Background>
<ImageBrush Stretch="None"/>
</TextBox.Background>
</TextBox>
</Grid>
</Grid>
</Grid>
</Window>
EDIT in your 3rd Inner Grid you are setting Margin="310,112,0,0" that is the cause of your problem. The Margin is work like this Margin="left,top,right,bottom" so you set the left Margin to 310 and top Margin to 112 that is why the textbox not in top left always. try to set the Margin to 0.
so it will look like this:
<Grid HorizontalAlignment="Left" Height="52" Margin="0" VerticalAlignment="Top" Width="122">
I have a simple custom window (XAML below).
When first loaded, it will add a user control to the grdContainer.Children collection.
User selection/action will cause other user controls to added/removed to the children collection. (one loaded at a time). What I am attempting to do is provide a simple animation as the new control is loaded, something like a 45degree swipe from top left to bottom right.
If anyone can point me in the right direction, I would appreciate it.
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="WinClientFolder"
x:Name="WinClientFolder"
Title="MainWindow"
Width="450" Height="300" AllowsTransparency="True" WindowStyle="None" ResizeMode="CanResizeWithGrip">
<Window.Background>
<SolidColorBrush />
</Window.Background>
<Grid x:Name="LayoutRoot">
<Border BorderBrush="Black" BorderThickness="2,2,2,0" Margin="18,13,0,0" CornerRadius="10,10,0,0" Background="#FFCCC523" Height="32" VerticalAlignment="Top" HorizontalAlignment="Left" Width="179" Name="FolderTab">
<Grid Height="25" HorizontalAlignment="Left" Name="grdFolderTop" VerticalAlignment="Top" Width="175">
<TextBlock x:Name="txtClientName" Height="34" TextWrapping="NoWrap" Width="Auto" FontSize="18" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="5,0,0,0"><Run Text="Doe, John Family " /><LineBreak /><Run /></TextBlock>
</Grid>
</Border>
<Border BorderBrush="Black" BorderThickness="2,1,6,2" Margin="0,45,0,0" Background="#FFCCC523" CornerRadius="10,10,0,0" Grid.ColumnSpan="2" Name="FolderBody">
<Grid Height="Auto" Name="grdContainer" Width="Auto" />
</Border>
</Grid>
I asked a somewhat similar question in this post. I can highly recommend this Transitionals framework. It's simple to use and looks great.
In Winforms, I use Fill and Dock to achieve this.
I have a "Page" where I would like to play a video file and also show the label at the bottom. I would like the page to be able to stretch and for the video to stretch and to have the label stay at the bottom of the page.
My attempts so far always results in the video covering the label when it is played. How can this be fixed?
(Other controls in the StackPanel have been omitted)
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="SDKSample.MediaElementExample" >
<DockPanel LastChildFill="True">
<MediaElement Source="media\numbers.wmv" Name="myMediaElement"
LoadedBehavior="Manual" UnloadedBehavior="Stop"
MediaOpened="Element_MediaOpened" MediaEnded="Element_MediaEnded"
DockPanel.Dock="Top" Margin="50" />
<StackPanel HorizontalAlignment="Center" Orientation="Horizontal"
Height="30" DockPanel.Dock="Bottom" Margin="50">
<TextBlock Margin="5" VerticalAlignment="Center">
Video Label
</TextBlock>
</StackPanel>
</DockPanel>
</Page>
Solution (with thanks to Daniel May):
<Grid Height="Auto">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<MediaElement Source="media\numbers.wmv" Name="myMediaElement" LoadedBehavior="Manual" UnloadedBehavior="Stop"
MediaOpened="Element_MediaOpened" MediaEnded="Element_MediaEnded" />
<StackPanel HorizontalAlignment="Center" Orientation="Horizontal" Height="30" Grid.Row="1">
<Button Content="Button" Height="23" Name="button1" Width="75" Click="button1_Click" />
</StackPanel>
</Grid>
You can achieve this using a Grid.
<Grid Height="300" Width="300">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<MediaElement Source="media\numbers.wmv"
Name="myMediaElement"
LoadedBehavior="Manual"
UnloadedBehavior="Stop"
MediaOpened="Element_MediaOpened"
MediaEnded="Element_MediaEnded" />
<TextBlock Margin="5"
Grid.Row="1"
VerticalAlignment="Center"
Text="Video Label" />
</Grid>
Using the Height attribute on the second RowDefinition, you force that row to size to it's contents. The preceding RowDefinition then fills the rest of the available space (in your case, your MediaElement).