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
Related
Lets say I have a xaml for my window like this:
<Window x:Class="WavePoint_MVVM.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
FontSize="13"
FontFamily="Verdana"
xmlns:local="clr-namespace:WavePoint_MVVM"
Height="{Binding SystemParameters.PrimaryScreenHeigth}"
Width="{Binding SystemParameters.PrimaryScreenWidth}"
AllowsTransparency="False"
WindowStartupLocation="CenterScreen"
ResizeMode="CanResizeWithGrip"
<Grid/>
</Window>
Now I want to fix some sort of limit in which the user can't resize the window beyond it. Just to give an example, in Spotify app for Windows desktop, the user can't resize beyond a certain limit. This is the minimum I can get:
Thoughts?
To force a minimum window size, set your MinWidth and MinHeight attributes on the Window:
<Window x:Class="WavePoint_MVVM.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
FontSize="13"
FontFamily="Verdana"
xmlns:local="clr-namespace:WavePoint_MVVM"
Height="{Binding SystemParameters.PrimaryScreenHeigth}"
Width="{Binding SystemParameters.PrimaryScreenWidth}"
AllowsTransparency="False"
WindowStartupLocation="CenterScreen"
ResizeMode="CanResizeWithGrip"
MinWidth="640"
MinHeight="480">
<Grid/>
</Window>
I have been using MahApp.Metro for a few project now, and WinForms charts too, and also combined them.
So nothing new on that front in this project, except :
The placement of the chart.
And this is causing an issue where the Mahapps.Metro Flyout menu i have opens BEHIND the chart. See Screenshot.
Is there any way to solve this? i have searched a bit and found nothing. In CSS it would be a simple z-index setting... but in C# i have no idea.
Any help appreciated.
XAML as requested :
<Controls:MetroWindow x:Name="wdw_MainWindow" x:Class="AdminProgram.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:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
xmlns:winformchart="clr-namespace:System.Windows.Forms.DataVisualization.Charting;assembly=System.Windows.Forms.DataVisualization"
xmlns:local="clr-namespace:AdminProgram"
mc:Ignorable="d"
Title="MainWindow" Height="600" Width="1024" GlowBrush="{DynamicResource AccentColorBrush}" WindowStartupLocation="CenterScreen" ResizeMode="NoResize" BorderThickness="2,2,0,2" ShowMinButton="False" ShowMaxRestoreButton="False" IsMinButtonEnabled="False" IsMaxRestoreButtonEnabled="False" BorderBrush="#FF7C7C7C" TitleForeground="White">
<Controls:MetroWindow.Flyouts>
<Controls:FlyoutsControl>
<Controls:Flyout x:Name="fyo_Menu" Header="Menu" Width="200" Theme="Accent">
<Grid>
<Controls:Tile x:Name="btn_AddNew" Title="Add New"
Width="150" Height="150" TitleFontSize="20" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0" Click="btn_AddNew_Click" KeepDragging="False" MouseEnter="Tile_MouseEnter" MouseLeave="Tile_MouseLeave" BorderBrush="#FFC89632">
</Controls:Tile>
<Controls:Tile x:Name="btn_ViewAll" Title="View All"
Width="150" Height="150" TitleFontSize="20" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,160,0,0" Padding="0" Click="btn_ViewAll_Click" MouseEnter="Tile_MouseEnter" MouseLeave="Tile_MouseLeave" BorderBrush="#FFC89632" >
</Controls:Tile>
</Grid>
</Controls:Flyout>
</Controls:FlyoutsControl>
</Controls:MetroWindow.Flyouts>
<GroupBox x:Name="gpb_Home_Stats" Header="Latest information and statistics" Margin="0,50,0,0">
<Grid>
<!--- Winforms Integrated charting -->
<!--Strength bars -->
<WindowsFormsHost x:Name="wfh_Statistics_Strengthometer" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0,0,0,0" Width="950" Height="425">
<winformchart:Chart x:Name="chart_Strengthometer" Dock="None">
<winformchart:Chart.Legends>
<winformchart:Legend Docking="Left" TitleSeparator="Line" Title="Coffee count by strength"/>
</winformchart:Chart.Legends>
<winformchart:Chart.Series>
<winformchart:Series Name="Strength" ChartType="Column"/>
</winformchart:Chart.Series>
<winformchart:Chart.ChartAreas>
<winformchart:ChartArea/>
</winformchart:Chart.ChartAreas>
</winformchart:Chart>
</WindowsFormsHost>
</Grid>
</GroupBox>
That's a known issue when mixing WinForms and WPF and is not related to MahApps.Metro. Just search for Airspace here at StackOverflow.
I have a transparent Window which works fine, but a TextBox ignores the ClearType.
The RenderOptions.ClearTypeHint="Enabled" is set but nothing happens. There is no other Effect, OpacityMask, VisualBrush, DrawingBrush, Clip, or Opacity only AllowsTransparency="True" and AllowsTransparency="True".
AllowsTransparency="True"
AllowsTransparency="False" on normal Window
Xaml sample
<Window x:Class="WpfApplication3.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="200"
Width="300"
Title="MainWindow"
AllowsTransparency="True"
WindowStyle="None">
<Window.Template>
<ControlTemplate>
<Grid Background="White"
Height="200"
Width="300"
RenderOptions.ClearTypeHint="Enabled"
TextOptions.TextRenderingMode="ClearType"
TextOptions.TextFormattingMode="Display">
<StackPanel VerticalAlignment="Center"
HorizontalAlignment="Center">
<Label>Lorem Ipsum Test</Label>
<TextBlock>Lorem Ipsum Test</TextBlock>
<TextBox Text="Lorem Ipsum"
Background="White" />
</StackPanel>
</Grid>
</ControlTemplate>
</Window.Template>
</Window>
Any suggestions? Is this a known issue that can not be solved?
UPDATE
With Snoop I see a TextBoxLineDrawingVisual, maybe this is causing the issue?
That's because grid's attached properties for text like "RenderingMode" internally implemented to apply on "textblock" not "textbox" child elements.
I've already posted a message about this, but I've lost it! And I can paste code now too...
I have a RibbonRadioButton whose image is being stretched, XAML below (I haven't changed the code-behind from its default). I have checked that the PNG is at 96dpi but the problem remains.
XAML:
<Window x:Class="DashboardTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ribbon="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"
Title="MainWindow" Height="350" Width="525">
<Grid>
<ribbon:Ribbon x:Name="Ribbon">
<ribbon:RibbonGroup x:Name="LiveStatusGroup"
Header="RibbonGroup Header">
<ribbon:RibbonRadioButton x:Name="Dashboard"
LargeImageSource="images\LiveStatus_Dashboard.png"
HorizontalContentAlignment="Center"
HorizontalAlignment="Center"
VerticalContentAlignment="Center"
VerticalAlignment="Center"
Label="RibbonRadioButton Label"
ToolTip="RibbonRadioButton ToolTip"/>
</ribbon:RibbonGroup>
</ribbon:Ribbon>
</Grid>
</Window>
Can anyone shed light on why this is happening? I am running Windows 7 with text size set to medium (125%).
J
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.