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. :)
Related
I am working on a Phone Dialer UWP application for Windows Mobile devices. In searching for dialer examples, I came across the PhoneCall sample that is bundled with Windows Universal Samples at https://github.com/Microsoft/Windows-universal-samples. The PhoneCall sample contains an example implementation of Dialer and a DialerPanel, complete with a text box to display or edit the number being typed, as well as the Call button. So far so good.
However, the sample dialer panel is hosted as a PivotItem in a tabbed interface implemented by MainPage.xaml, and it occupies the entire space available to it.
What I am looking for is something like a DialerPanel in the sample, but one that could shrink to fit in my Grid cell. I will have the available space split into two Grid cells, with the upper half occupying a custom control or an image, while the lower half will host the Dial Pad.
In my attempt to accomplish what I need, I modified the sample DialerPanel.xaml as follows:
I created a new outer Grid with two rows, each taking up 50% of the available space.
In the upper row, I added a rectangle with a fill of "Light Yellow"
In the lower row, I added the original Dialer Panel layout contained in a Grid (basically, I moved the ORIGINAL Grid into a Grid cell at Row 1, Column 0.
Below is the image of my XAML outline (with certain blocks collapsed for clarity):
Here's the XAML:
<UserControl
x:Class="PhoneCall.Controls.DialerPanel"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:PhoneCall.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Rectangle Fill="LightYellow" Grid.Row="0"/>
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0">
<local:LinePicker Margin="0,20,0,0"/>
<Grid Style="{StaticResource DigitViewGridStyle}">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ScrollViewer x:Name="dialerNumberControlScrollviewer"
Grid.Column="0"
Style="{StaticResource DigitViewScrollerStyle}">
<TextBlock Style="{StaticResource DigitViewTextStyle}"
SizeChanged="OnDialerNumberControlSizeChanged"
Text="{Binding DialerPhoneNumber.NumberToDial, Mode=OneWay}">
</TextBlock>
</ScrollViewer>
<Button Grid.Column="1"
Command="{Binding ProcessBackspace}"
IsEnabled="{Binding DialerPhoneNumber.DialPadEnabled, Mode=OneWay}"
Holding="OnBackspaceHolding">
<FontIcon FontFamily="Segoe MDL2 Assets" Glyph="" FontSize="30"/>
</Button>
</Grid>
</StackPanel>
<StackPanel Grid.RowSpan="2" VerticalAlignment="Bottom">
<StackPanel Style="{StaticResource DialpadPanelStyle}">
<local:Dialpad x:Name="Dialpad"/>
<Button IsEnabled="{Binding DialerPhoneNumber.DialPadEnabled, Mode=OneWay}"
Style="{StaticResource AccentLongButtonStyle}"
Command="{Binding ProcessDialDialerNumberHeap}" >
<Button.ContentTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<FontIcon FontFamily="Segoe MDL2 Assets" Glyph="" RenderTransformOrigin="0.5,0.5">
<FontIcon.RenderTransform>
<CompositeTransform ScaleX=".75" ScaleY=".75"/>
</FontIcon.RenderTransform>
</FontIcon>
<TextBlock Text="Call"
Grid.Row="1"
Style="{StaticResource CaptionTextBlockStyle}"
Margin="0,4,0,0"
LineHeight="14"
HorizontalAlignment="Center" />
</Grid>
</DataTemplate>
</Button.ContentTemplate>
</Button>
</StackPanel>
</StackPanel>
</Grid>
</Grid>
</UserControl>
When I build the app with the changes above and run the sample, this is how it appears on the phone with my rectangle covering the Dial Pad:
I tried a couple of things including reduced fixed width and height for the Dialer Panel, but I could not make it work.
A couple of questions:
1. What am I doing wrong here and how can I fix it?
2. Is there a third party DialPad control (free or paid) that I can reference in my project and just use it?
Thanks for all your help!
I think the problem is in this line:
<StackPanel Grid.RowSpan="2" VerticalAlignment="Bottom">
This stack panel starts in row 0 where you the put
<StackPanel Grid.Row="0">
Can you try this?
<StackPanel Grid.Row="2" VerticalAlignment="Bottom">
I'm trying to make text editor for Windows (PC) in UWP but the scaling is not working, I've done the same in WPF and it worked.
The page size is set to 800x600, these are columns:
<Grid Background="White" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock x:Name="filename" Margin="10" Grid.ColumnSpan="2">Untitled</TextBlock>
<Border Margin="5" Grid.Row="1">
<TextBox x:Name="text" AcceptsReturn="True"
ScrollViewer.VerticalScrollBarVisibility="Visible"
ScrollViewer.HorizontalScrollBarVisibility="Visible" TextChanged="text_TextChanged"/>
</Border>
<StackPanel Grid.Row="2" Margin="3,3" Orientation="Horizontal" MinHeight="31" >
<Button x:Name="saveButton" FontSize="15" Content="Save" Margin="0,0,0,-0.125" VerticalAlignment="Top" Click="saveButton_Click" />
<Button x:Name="button" Content="Save as..." Margin="5,0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Click="button_Click" />
<Button x:Name="loadButton" FontSize="15" Content="Read" Margin="5,0" VerticalAlignment="Bottom" Click="loadButton_Click"/>
</StackPanel>
</Grid>
Title is in 1st row, content is in 2nd, buttons (save, load) are in 3rd, it looks like grid it wouldn't exist:
That's with normal size
After size change
How do I fix it?
The page size is set to 800x600
If you've set the page size to 800x600 like this: <Page Width="800" Height="600"... it will always be 800x600 and it will not scale. If you want it to scale properly, just don't set these properties.
I assume you wanted to set the size of the app when it starts for the first time. You can approach it by setting the ApplicationView.PreferredLaunchViewSize.
Also I recommend to use the RichEditBox to display and edit text files.
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 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.
I've got a WPF Expander that is right aligned. That bit shows correctly on the screen, but when you expand it the expander and the text "show/hide historic data" jumps to the left of the screen. Close the expander and it returns to the correct (right) alignment.
I've tried various approaches but am unable to find why this is happening or more importantly how to keep an expanded expander right aligned
<Grid Grid.Row="1"
HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Row="0" >
<TextBlock Style="{StaticResource SubHeader}" Text="Historic Data Sets" />
<Rectangle Style="{StaticResource HeaderLine}"/>
</StackPanel>
<Expander Header="show/hide historic data"
Grid.Column="1"
IsEnabled="True"
VerticalAlignment="Center"
HorizontalAlignment="Right"
ExpandDirection="Down">
<!-- some other stuff in the second row such as grid... -->
</Expander>
YOu can take control of the Header by explictly marking it as a TextBlock and then change itś HorizontalAlignment property:
<Expander.Header>
<TextBlock
Width="200"
HorizontalAlignment="Right"
Text="Show information.."></TextBlock>
</Expander.Header>