Ive done searching and i can't find anything on why my designer window does this.
http://i.imgur.com/bH4lU.png
and when i run it looks like this.
http://i.imgur.com/oOhYt.png
See how it is farther away on the right?
This makes building a window very annoying. How can i stop this?
<Window x:Class="WPF1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Main Window" Height="360" Width="547" ResizeMode="NoResize">
<Grid Background="#FF464646" Height="329">
<ListBox Height="321" HorizontalAlignment="Left" Name="listBox1" VerticalAlignment="Top" Width="120" Background="#FF252525" />
<Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="126,298,0,0" Name="button1" VerticalAlignment="Top" Width="75" />
<ListBox Height="322" HorizontalAlignment="Left" Margin="393,0,0,0" Name="listBox2" VerticalAlignment="Top" Width="132" BorderBrush="White" Background="#FF252525" />
</Grid>
You have the 2nd ListBox left aligned with a 393 margin. Set the HorizontalAlignment to Right instead.
Judging by your xaml, it looks like you are using the Visual Studio designer to create this code. You should study up on WPF's layout system some more and this will all make sense. Currently your view is static, which means it won't resize with the parent element (i.e. when the Window resizes, all of the stuff stays in the same place). This is why you are seeing borders. You'll want to remove the Height, Width, and Margins on all of your elements, and set the HorizontalAlignment and VerticalAlignments accordingly to make your Window look right when it is resized.
Related
When I use 125% DPI setting in Windows, sometimes a button border is not rendered. It seems to depend on the size and position, maybe also the parent element of a button:
In my app, I can also see in the WPF designer that a parent border seems to be too small in size, though the button itself is larger. Maybe the measure process is somehow wrong:
I tried changing UseLayoutRounding for the whole window, also changing SnapsToDevicePixels does not help.
DPI Awareness is set in the manifest.
Does anyone know how to fix this for the entire application?
Thats the code in a default Wpf Window Application (I can't reproduce the problem right now, but the problem persists in my application):
<Window x:Class="WpfApp3.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"
mc:Ignorable="d"
Title="MainWindow"
SizeToContent="WidthAndHeight">
<StackPanel>
<GroupBox>
<GroupBox.Header>
<Button Width="20"
Height="22"
Content="X" />
</GroupBox.Header>
</GroupBox>
<Button Width="20"
Height="22"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Content="X" />
</StackPanel>
</Window>
For example Button, Link, Image ,...
This code does not work:
<Grid>
<TextBox
HorizontalAlignment="Left"
Height="180"
Margin="38,35,0,0"
TextWrapping="Wrap"
Text="TextBox"
VerticalAlignment="Top"
Width="442"
>
<Button
Content="Button"
HorizontalAlignment="Left"
Margin="149,105,0,0"
VerticalAlignment="Top"
Width="75"
RenderTransformOrigin="-2.78,1.376"
/>
</TextBox>
</Grid>
Not without writing your own custom control. That is the proper solution.
Here is a good example of a custom control for this: https://stackoverflow.com/a/6419556/1624581
Alternatively, as a hacky and quick solution you could put the button and the textbox in a container (e.g. stackpanel or grid) and then use a negative margin on the button so that it appears within the textbox. You can then apply a padding on the right of the textbox so that the input text doesn't overlap with the button. With that said, I'd strongly recommend writing a custom control as negative margins can cause maintenance headaches in the long run.
So im trying to get my scroll bar to A only show up as needed and B show up only around my description text
Right now the scroll view is going from the top of the window to the bottom
<Window x:Class="WpfApplication3.DataWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="DataWindow" Height="300" Width="300">
<Grid>
<Label x:Name="lblTitle" Content="Label" HorizontalAlignment="Left" Margin="96,25,0,0" VerticalAlignment="Top" Width="186"/>
<Label x:Name="lblPublishDate" Content="Label" HorizontalAlignment="Left" Margin="96,53,0,0" VerticalAlignment="Top" Width="186"/>
<Image x:Name="imgPic" HorizontalAlignment="Left" Height="81" Margin="10,10,0,0" VerticalAlignment="Top" Width="81"/>
<ScrollViewer>
<TextBlock x:Name="tbDesc" HorizontalAlignment="Left" Margin="10,96,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Height="167" Width="272" Text="TextBlock" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Auto" />
</ScrollViewer>
</Grid>
A grid tries to let it's children take up all availble space.
Your ScrollViewer is one of the children, so it will fill all available space by default.
There are a number of ways around this.
You could use a different panel type, one that doesn't try to stretch it's children to fill all available space. Based on what you're doing with excessively large margins, a Canvas might be suitable.
I would suggest reading this for a quick understanding of WPF's available Layout Panels : WPF Layouts - A Visual Quick Start
Another alternative is to give your Grid some Row Definitions, and specify that the row containing the ScrollViewer should be of a fixed size, or should be sized so it fits whatever size the child object wants (Height="Auto")
Or you could give your ScrollViewer a fixed height, and set it's VerticalAlignment property so it gets docked to either the top or bottom of the Grid.
Personally I would recommend the first option - reviewing WPF's layout system and determining a more approrpiate panel type for your layout. And if the most appropriate panel type is a Grid, then I would highly recommend using the RowDefinitions and ColumnDefinitions to give your Grid some structure, rather than trying to use excessively large Margins to position your controls.
You're pretty close, the problem appears to be an issue of layout. Because the controls are arranged in the grid without row and column definitions the scrollviewer is attempting to resize to the full size of the grid while the textblock is adhereing to its fixed size and margin. Try the following starting point and see if it helps:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="150"/>
<RowDefinition/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0">
<Label x:Name="lblTitle" Content="Label" HorizontalAlignment="Left" Width="186"/>
<Label x:Name="lblPublishDate" Content="Label" HorizontalAlignment="Left" Width="186"/>
<Image x:Name="imgPic" HorizontalAlignment="Left" Height="81" Width="81"/>
</StackPanel>
<ScrollViewer Grid.Row="1" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
<TextBlock x:Name="tbDesc" HorizontalAlignment="Left" TextWrapping="Wrap" Text="TextBlock"/>
</ScrollViewer>
</Grid>
I'm not able to center text vertically on a default button (no styles or templates used)
I saw threads like
Text content in a WPF button not being centred vertically
^^ I'm not setting any text height atleast in button 1.
Not sure what causes this behavior and how to get rid of it efficiently when localisation comes in.
I do get I can set a -ve margin to align text exactly, however that might screw things up for another language. Is this some limitation based on the Default Font Family Expression blend seems to impose?
Any help with this would be great. Seems trivial but cant seem to find a decent explanation for what's causing this behavior.
Xaml code is as follows:
<Window x:Class="TestButton.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Button Content="ButtonFFAH" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" VerticalContentAlignment="Center"/>
<Button Content="ButtonAH" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75"
Margin="80,0,0,0" Height="15.627" VerticalContentAlignment="Center"/>
</Grid>
It`s how it works internally. If you want some more control, just fill button content with more customizable things that just a string. Like this:
<Button HorizontalAlignment="Left" VerticalAlignment="Top" Width="75"
Margin="80,0,0,0" Height="15.627" VerticalContentAlignment="Center">
<TextBlock VerticalAlignment="Center">ButtonAH</TextBlock>
</Button>
The apparent vertical misalignment is due to the fact that all kinds of accents or other diacritical marks add to the total font height. Although the actual Button content may not contain such characters, the vertical alignment has to take this into account to ensure a common baseline alignment with other Buttons with the same "outer" alignment, for example in the same Grid row.
Consider a window with loads of multi colored controls on it. I want to put a panel on top of this when some trigger happens in the form such that all the controls looses its color (everything appears in gray scale) except the panel which has just popped up. Can somebody help me with this ??
I would use the Effect property of whatever the client area you wish to gray scale. You will however need to create your own pixel shader to do the gray scale conversion.
http://windowsclient.net/wpf/wpf35/wpf-35sp1-more-effects.aspx
You could quickly test your concept by using the BlurEffect class instead of a custom shader.
<Window x:Class="WpfGrayscaleSample.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="327" Width="526">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="239*" />
<RowDefinition Height="50*" />
</Grid.RowDefinitions>
<Canvas Name="clientArea" Background="Transparent" Grid.Row="0">
<!-- Just some controls -->
<Button Height="31" Name="button1" Width="80" Canvas.Left="30" Canvas.Top="125">Button</Button>
<Button Height="28" Name="button2" VerticalAlignment="Bottom" Click="button2_Click" HorizontalAlignment="Right" Width="75" Margin="0,0,16,34" Canvas.Left="66" Canvas.Top="54">Button</Button>
<Rectangle Margin="86,43,0,0" Name="rectangle1" Stroke="Black" Fill="Crimson" Height="59" HorizontalAlignment="Left" VerticalAlignment="Top" Width="109" Canvas.Left="145" Canvas.Top="44" />
</Canvas>
<!-- Button to activate the shader effect -->
<Button Height="23" Margin="15,0,0,21" Name="button3" VerticalAlignment="Bottom" HorizontalAlignment="Left" Width="75" Grid.Row="1" Click="button3_Click">Button</Button>
</Grid>
And the event handler for button3 would simply be
private void button3_Click(object sender, RoutedEventArgs e)
{
clientArea.Effect = new BlurEffect() { Radius = 10.0 };
}
Of course it is a bit more work to hook up the custom shader for the gray scaling, but the added bonus of the pixel shader is going to be performance.
In your top-level container (Grid, etc.), just create a Rectangle in a lower ZIndex (or create one more level of nesting).
When you pop your panel up, swap the ZIndex for the Rectangle to fit between your controls and your panel.
As far as the grayscale, there's probably some nifty ways to do it with a VisualBrush, but I think you could get pretty far with a semi-opaque SolidColorBrush on the Rectangle.