I have started with XAML as part of my freetime and now I have a problem with the padding of the standard button.
I have the following code for a grid which resides in another grid, so I have four grids inside my page and the problem is that the buttons are cut off and I am not able to change the width or the padding of the buttons.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Name}" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" HorizontalAlignment="Center" FontSize="24"/>
<Button x:Name="Player2MinusButton" Content="-" Grid.Row="1" Grid.Column="0" FontSize="20" ></Button>
<Button x:Name="Player2PlusButton" Content="+" Grid.Row="1" Grid.Column="2" FontSize="20" ></Button>
</Grid>
The problem is now, that the button is cut of as you could see in the screenshot here:
I have already tried to set a negative padding/margin and also to make a Custom Style:
<Style TargetType="Button" x:Key="ButtonStyle">
<Setter Property="Padding" Value="-10,0"/>
</Style>
Thanks for your hints and I hope I have nothing forgotten in my first question.
Michael
Since you want a narrower than standard button set the Buttons' MinWidth property:
<Button x:Name="Player2PlusButton" Content="+" Grid.Row="1" Grid.Column="2" FontSize="20" MinWidth=50 AutomationProperties.Name="Plus Button" ></Button>
If you copy the button template (right click on the button in the designer then select Edit Template... and follow the prompts) you'll find the following:
<x:Double x:Key="PhoneButtonMinHeight">57.5</x:Double>
<x:Double x:Key="PhoneButtonMinWidth">109</x:Double>
I assume you're running on the phone: the Windows Store Button template is different and doesn't set the minimums. Your buttons come out small there by default.
Related
I have a problem with my current code.
I have this:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="3*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!-- Text editor -->
<StackPanel>
<TextBox Margin="3" MaxHeight="500" Padding="2" x:Name="TextEditor" VerticalScrollBarVisibility="Visible" AcceptsReturn="True" AcceptsTab="True" KeyDown="TextEditor_KeyDown" />
<!-- Tools buttons -->
<StackPanel Orientation="Horizontal">
<!-- Save button -->
<Button Width="27" Height="27" HorizontalAlignment="Left" x:Name="button_textEditor_save" Style="{DynamicResource NoChromeButton}" Click="button_textEditor_save_Click" >
<Image Source="Assets/Images/save_file.png"/>
</Button>
<!-- Open button -->
<Button Width="32" Height="32" HorizontalAlignment="Left" x:Name="button_textEditor_open" Style="{DynamicResource NoChromeButton}" Click="button_textEditor_save_Click" >
<Image Source="Assets/Images/open_file.png"/>
</Button>
<!-- Save location -->
</StackPanel>
</StackPanel>
</Grid>
with this code, I get this window:
Not resized window
And when I maximize the window, i get this:
Window maximized
So, now, my question is, how I can set an initial size for the text box (I know height parameter but with this , the control will not expand when I maximize the window), I'm working in a window with this size: 650x900. If I use a grid to set the text box (Right now StackPanel) I have to set specific sizes to the grid's rows. I hope I have explained correctly. Thanks
when you place any control within grid with row and column defined,
control has Grid.Row = 0 and Grid.Column=0 value by default. Here in your code the first StakePlane also has default row and column value 0. If you comment out column definition and try then you will find that the Textbox is getting resized with window being resized
Your requirement is not clear to me. But as you are saying you want text editor type thing, you can try like this:
<Grid>
<!--<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="3*" />
</Grid.ColumnDefinitions>-->
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto" />
<!--<RowDefinition Height="*" />-->
</Grid.RowDefinitions>
<!-- Text editor -->
<!--<StackPanel>-->
<TextBox Grid.Row="0" Margin="3" MaxHeight="500" Padding="2" x:Name="TextEditor" VerticalScrollBarVisibility="Visible" AcceptsReturn="True" AcceptsTab="True" KeyDown="TextEditor_KeyDown" />
<!-- Tools buttons -->
<StackPanel Orientation="Horizontal" Grid.Row="1">
<!-- Save button -->
<Button Width="27" Height="27" HorizontalAlignment="Left" x:Name="button_textEditor_save" Style="{DynamicResource NoChromeButton}" Click="button_textEditor_save_Click" >
<Image Source="Assets/Images/save_file.png"/>
</Button>
<!-- Open button -->
<Button Width="32" Height="32" HorizontalAlignment="Left" x:Name="button_textEditor_open" Style="{DynamicResource NoChromeButton}" Click="button_textEditor_save_Click" >
<Image Source="Assets/Images/open_file.png"/>
</Button>
<!-- Save location -->
</StackPanel>
<!--</StackPanel>-->
</Grid>
you can also checkout these links - MSDN and wpftutorial
Is there a way in WPF to align a control with the beginning of the text in a radio button above it without simply using margins? In the example below, I have a radio button in the 1st row and a textblock in the row directly below it. I want the text in the textblock to line up with the text in the radiobutton.
You could separate the text of the radio button from the button itself.
Something like this should work:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<RadioButton Grid.Column="0" Grid.Row="0" />
<TextBlock Grid.Column="1" Grid.Row="0" Text="Location" />
<TextBlock Grid.Column="1" Grid.Row="1" Text="hahah" />
</Grid>
It is a pretty verbose solution for such a small task, but they will always be aligned.
This is most certainly the most confusing thing I have encountered while programming as of yet. For some unknown reason only a small horizontal band of the XAML controls (in this case a Button (the one furthest up) and a TextBlock) is visible and if the application is not in fullscreen, nothing can be seen! On the other hand, the Button to the left (the one furthest down in the code), which is a pure copy of the one you get via the Visual Studio "Toolbox" under "Common XAML Controls", works fine!
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Button x:Name="button" Content="My button name" Height="77" Margin="809,198,0,805" Width="353"/>
<TextBlock x:Name="textBlock" Height="83" Text="An example...." Margin="809,428,0,0" Width="353" VerticalAlignment="Top" HorizontalAlignment="Left"/>
<Button x:Name="button1" Content="Button" HorizontalAlignment="Left" Height="117" Margin="542,327,0,0" VerticalAlignment="Top" Width="156"/>
</Grid>
The file containing the three XAML controls is the only file that have been changed, otherwise it is simply the default Blank UWP in Visual Studio. I am using the Desktop (1920 x 1080) format.
In light of what I have written previously, could someone please tell me what I can do to fix this because I am utterly clueless.
Answer: After having fooled around with another project exhibiting similar problems I stumbled upon a solution. The problem is that for some reason or another the XAML controls do not work properly if the the margin on the opposite side is not 0 (top vs bottom, right vs left). In order to still be able to specify the position of the XAML control HorizontalAlignment and VerticalAlignment has to be added and the orientation be the same as the parameter you input into the Margin. Therefore, if you have specified the right Margin for it, you must also set the HorizontalAlignment to right as seen below. The Opposite can also be done.
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Button x:Name="button" Content="My button name" Height="77" Margin="0,0,500,900" Width="353" VerticalAlignment="Bottom" HorizontalAlignment="Right"/>
<TextBlock x:Name="textBlock" Height="83" Text="An example...." Margin="809,428,0,0" Width="353" VerticalAlignment="Top" HorizontalAlignment="Left"/>
<Button x:Name="button1" Content="Button" HorizontalAlignment="Left" Height="117" Margin="542,327,0,0" VerticalAlignment="Top" Width="156"/>
</Grid>
So I'm not sure what you mean by a class to allow it. Some dependency properties of the controls used is all you need. So try this. Literally took less than a minute and ask if you have questions. There's a lot of different ways to do the same thing depending on your style/habits, this is just one.
output:
snippet:
<!-- We have a bit of a margin on the parent for spacing
and shrink the space to what's necessary. -->
<Grid Background="White" Margin="10,10,20,10"
VerticalAlignment="Top">
<Grid.RowDefinitions>
<!-- Let's let our odd # rows do our spacing instead of random margins -->
<RowDefinition Height="Auto"/>
<RowDefinition Height="10"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="10"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="10"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="10"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4*"/>
<ColumnDefinition Width="6*"/>
</Grid.ColumnDefinitions>
<Grid.Resources>
<!-- So we don't set the same properties on every instance. -->
<Style TargetType="TextBlock" BasedOn="{StaticResource BaseTextBlockStyle}">
<Setter Property="HorizontalAlignment" Value="Right"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Margin" Value="5"/>
</Style>
</Grid.Resources>
<TextBlock Grid.ColumnSpan="2" Text="Exaaaaaaamples"
HorizontalAlignment="Center"/>
<TextBlock Grid.Row="2"
Text="Email:"/>
<TextBox Grid.Row="2" Grid.Column="1"/>
<TextBlock Grid.Row="4"
Text="Username:"/>
<TextBox Grid.Row="4" Grid.Column="1"/>
<TextBlock Grid.Row="6"
Text="Password:"/>
<PasswordBox Grid.Row="6" Grid.Column="1"/>
<TextBlock Grid.Row="8"
Text="Age of Account:"/>
<TextBox Grid.Row="8" Grid.Column="1"/>
</Grid>
Hope this is inline with what you're looking for, if not say so and we'll get you sorted. :)
I have built a WPF application with a variable width and height (xaml height and width definition for the window is set to Auto). Once the contents of the window are loaded, the width does not (well, is not supposed to) change. The height might change as items are removed or added from the list.
The background is a gradient, not an image.
After a period where the application is idling and isn't the top-most, when switching back to the application, the window is wider as a black bar was added, extending the window to the right.
.
(Before this black bar appears, the window's width is the section with the blue gradient background)
I've added a hidden menu item to the window and when the user presses Alt the menu appears. At first, I simply added the menu and opening it caused the window to re-render as menu the item suddenly became visible and added to the window's height. As the window was re-rendered, the black bar disappeared and the window was its original width.
I tried the following solutions by adding an event where Window.OnFocus calls a function which:
changes the width (adds 1 pixel and then removes 1 pixel)... but this doesn't seem to do anything.
checks the width of the window. If the width is larger than the expected width, a re-render is manually called. But no dice...
What is causing this black bar to appear? How can I prevent it from happening?
The biggest problem here is that I can't seem to consistently reproduce the problem... sometimes, the application will sit open, idling in the background for the whole day and this won't happen. Sometimes, I'll go out to lunch, come back and there it is...
The content is loaded dynamically upon starting up, and there's a webservice call initiated every few minutes to check for changes. At this stage of development and testing, there aren't all that many changes happening so that the ui items are simply static most of the time. Even so, this black bar will appear at times after the application idles for a while, as mentioned.
Per suggestion, here is the xaml for the application:
MainWindow:
<Window x:Class="MyApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:y="clr-namespace:MyApp"
Title="MyApp"
Height="Auto" Width="390"
SizeToContent="WidthAndHeight"
WindowStyle="SingleBorderWindow"
WindowStartupLocation="Manual"
ResizeMode="CanMinimize">
<Grid Name="MainGrid" Style="{StaticResource Normal}">
<Grid.RowDefinitions>
<RowDefinition Height="18" />
<RowDefinition Height="65"/>
<RowDefinition Height="Auto" MinHeight="200"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
<ColumnDefinition Width="218" />
</Grid.ColumnDefinitions>
<Menu Grid.ColumnSpan="2"
[SETTINGS REMOVED FOR BREVITY]>
</Menu>
[ELEMENTS REMOVED FOR BREVITY]
<Grid Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" Height="Auto" Width="Auto" x:Name="ContentGrid"></Grid>
</Grid>
</Window>
MainPanel (which goes into the ContentGrid):
<UserControl x:Class="MyApp.MainPanel"
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"
Height="Auto" Width="Auto" FlowDirection="RightToLeft">
<Grid Margin="19,0,19,0">
<Grid.RowDefinitions>
<RowDefinition Height="65" />
<RowDefinition Height="Auto"/>
<RowDefinition Height="75" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="160" />
<ColumnDefinition Width="85" />
<ColumnDefinition Width="85" />
</Grid.ColumnDefinitions>
<TextBlock Name="FirstHeader" Grid.Column="0" Grid.Row="0" Style="{StaticResource Header}" Text="***" />
<TextBlock Name="SecondHeader" Grid.Column="1" Grid.Row="0" Style="{StaticResource Header}">***<LineBreak />***</TextBlock>
<TextBlock Name="ThirdHeader" Grid.Column="2" Grid.Row="0" Style="{StaticResource Header}" Text="***" />
<StackPanel Name="MainStack" Grid.Row="1" Grid.ColumnSpan="3" />
<Button Name="ActionButton" Grid.ColumnSpan="3" Grid.Row="2" FlowDirection="LeftToRight" Style="{StaticResource NotInService}" Click="ActionButton_Click" />
</Grid>
</UserControl>
And the MainStack in the MainPanel is filled with these:
<UserControl x:Class="MyApp.mItem"
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="35" d:DesignWidth="348" FlowDirection="RightToLeft">
<Grid Margin="0,0,0,05">
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="160" />
<ColumnDefinition Width="85" />
<ColumnDefinition Width="85" />
</Grid.ColumnDefinitions>
<Button Grid.Row="0" Grid.Column="0" Name="PanelActionButton" Style="{StaticResource PanelActionButton}" Click="PanelActionButton_Click">
<TextBlock Name="AnswerButtonText" Style="{StaticResource ButtonText}"></TextBlock>
</Button>
<Label Grid.Row="0" Grid.Column="1" Name="SecondCol" Style="{StaticResource SecondCol}" />
<Label Grid.Row="0" Grid.Column="2" Name="ThirdCol" Style="{StaticResource ThirdCol}" />
</Grid>
</UserControl>
I don't know if it's pertinent, but this is the way I've styled the background:
<Style TargetType="{x:Type Grid}" x:Key="Normal">
<Setter Property="Background">
<Setter.Value>
<RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="1" RadiusY="1">
<RadialGradientBrush.GradientStops>
<GradientStop Color="#00AEEF" Offset="0" />
<GradientStop Color="#034ea2" Offset="1" />
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="FlowDirection" Value="RightToLeft" />
</Style>
Some suggestions:
SizeToContent="WidthAndHeight"
could be changed to
SizeToContent="Height"
since you also defined the width to be 390.
Besides that, check if the window with the black area is still the expected width of 390.
Although it´s not in your posted code, check if elements could extend the width with it´s content (like images, long strings, etc.).
Another thing you should consider is to carefully choose your margins and widths (and heights) since they could easily sum up.
E.g. your using
<Grid.ColumnDefinitions>
<ColumnDefinition Width="160" />
<ColumnDefinition Width="85" />
<ColumnDefinition Width="85" />
</Grid.ColumnDefinitions>
twice and inside grids which each have a margin.
Also have a look at the menu you´re using. Since it´s using some visibility converter, my guess is, that it might generate a menu that could be more than 390 wide.
And finally... what´s with the
FlowDirection="RightToLeft"
If there´s no real need for it, delete it :)
I'm designing Silverlight ChildWindow and I met one intersting problem. I defined a button on a window title as follows:
<ChildWindow.Title>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Text="This is textblock" Grid.Column="0"/>
<Button Content="Help" Name="btnHelp" Grid.Column="1" Width="100"
Margin="300,0,0,0" />
</Grid>
</ChildWindow.Title>
This window is resizable. When you try to resize the window, the "btnHelp" button is covered by the close button, and the "btnHelp" button is not aligned to the edge of the window also. I tried before to use a StackPanel, also I used margins in both variants (StackPanel and Grid) and they didn't help me properly. The variant in the code is latest:) Could you please give a hint, what can I do with that?
Thanks in an advance.
This is a result of what appears to be a strange choice in the ChildWindow's control template -- the Title content is not stretched, so you can't really right-align anything without hard-coding it. So, you could go ahead and just apply fixed widths to the Grid column widths:
<controls:ChildWindow.Title>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="250"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<TextBlock Text="This is textblock" Grid.Column="0"/>
<Button Content="Help" Name="btnHelp" Grid.Column="1" />
</Grid>
</controls:ChildWindow.Title>
That's quick-and-dirty, but not very satisfying. An alternative would be to modify the ControlTemplate (at the link above) so that it behaves how you would expect. Find the ContentControl that displays the Title, and make it stretch to fill the available space, by adding HorizontalContentAlignment="Stretch":
<Style TargetType="controls:ChildWindow" x:Key="MyChildWindowStyle">
<!-- etc ... -->
<ContentControl Content="{TemplateBinding Title}" FontWeight="Bold"
HorizontalContentAlignment="Stretch"
HorizontalAlignment="Stretch" IsTabStop="False" Margin="6,0,6,0" VerticalAlignment="Center"/>
<!-- etc ... -->
</Style>
This allows you to use the normal layout controls like Grid, and it will render as expected:
<controls:ChildWindow Style="{StaticResource MyChildWindowStyle}"
...
<controls:ChildWindow.Title>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Text="This is textblock" Grid.Column="0"/>
<Button Content="Help" Name="btnHelp" Grid.Column="1" Width="100"/>
</Grid>
</controls:ChildWindow.Title>