I'm designing uwp apps. My pc resolution is 1920 x 1080, 100% scale. All the elements are layout normal.
But when running app on a screen 1920 x 1080, 125% scale, the elements are not in the right place and all are 1.25x bigger.
So how to disable scale under all resolutions, or is there any solutions?
I am giving you the simple example in which i am showing two buttons and one grid you can run this on any resolution the left and right hand side button always keep in same position and grid will change accordingly resolution size
<Grid HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" >
<Grid.RowDefinitions>
<RowDefinition Height="150"/>
<RowDefinition Height="169*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="113*"/>
<ColumnDefinition Width="150"/>
</Grid.ColumnDefinitions>
<Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10,55,10,40" />
<Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10,55,10,40" Grid.Column="2" />
<Grid Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" BorderBrush="Black" BorderThickness="2" Grid.RowSpan="2"/>
</Gid>
your code sample
<Grid HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="945"/>
<ColumnDefinition Width="945"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Color"
Margin="117, 84, 0, 0"
FontSize="48"/>
<Button Grid.Row="1" Content="Red" Width="500" Height="80" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Margin="445 30 0 0"
/>
<Button Grid.Row="1" Grid.Column="1" Content="Yellow" Width="500" Height="80"
Margin="0 30 445 0"
HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Grid Grid.Row="2" Grid.ColumnSpan="2"
Margin="84 40 84 0" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" BorderBrush="Black" BorderThickness="2"/>
</Grid>
Related
I want to put stackPanels side by side. Then in each stack panel, there are different controls. Now the first stack panel is working. It has textblocks and text boxs. Now I want to add a button on the second stack panel and so on. The question is that the second panel doesn't show the button's content. Not sure why?
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal" Width="300" HorizontalAlignment="Left" Margin="10">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal" Grid.Column="0" Grid.Row="0" HorizontalAlignment="Left">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="100"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="25"></RowDefinition>
<RowDefinition Height="25"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0" Text="Year" TextAlignment="Center"></TextBlock>
<TextBlock Grid.Column="1" Grid.Row="0" Text="Week" TextAlignment="Center"></TextBlock>
<TextBlock Grid.Column="2" Grid.Row="0" Text="File Location" TextAlignment="Center"></TextBlock>
</Grid>
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Column="1" Grid.Row="0" Margin="10">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="100"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Button Grid.Column="0" Grid.Row="0">
<TextBlock Text="Get Informations" TextWrapping="Wrap" TextAlignment="Center"></TextBlock>
</Button>
</Grid>
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Column="2" Grid.Row="0"></StackPanel>
<StackPanel Orientation="Horizontal" Grid.Column="0" Grid.Row="1"></StackPanel>
<StackPanel Orientation="Horizontal" Grid.Column="2" Grid.Row="1"></StackPanel>
</Grid>
</StackPanel>
</StackPanel>
You are setting the width of the Stackpanel as 300, if you want a solution. either remove the stackpnael (the one that has 300 width) or fix the Grid inside that stackpanel to be 300
The width of the Rectangle is now 0.
if I set the ColumnDefinition to 200 or width in Rectangle tot 200, than I can see the Rectangle. But with the star it's not working.
I'm Trying to set the width of Rectangle 1 and 3 to 40% width and Rectangle 2 to 20%.
What is wrong in my code?
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Center" Orientation="Vertical" Margin="0,100,0,0">
<StackPanel HorizontalAlignment="Stretch" Orientation="Horizontal">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="4*"/>
<ColumnDefinition Width="3*"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Height="200" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Fill="Beige" StrokeThickness="2" Stroke="Red" />
<Rectangle Grid.Column="1" Height="200" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<Rectangle Grid.Column="2" Height="200" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Fill="Beige" StrokeThickness="2" Stroke="Red" />
</Grid>
</StackPanel>
</StackPanel>
</Grid>
Why would you need stackpanels at all? You could do with just grids.
Anyway, StackPanel doesn't stretch along its orientation (i.e. vertical stackpanel does not stretch vertically and horizontal stackpanel does not stretch horizontally).
Example:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="100" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Grid
Grid.Row="1"
Grid.Column="1"
Margin="0,100,0,0"
Background="Aquamarine"
>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="4*"/>
<ColumnDefinition Width="3*"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Height="200" Fill="Beige" StrokeThickness="2" Stroke="Red" />
<Rectangle Grid.Column="1" Height="200"/>
<Rectangle Grid.Column="2" Height="200" Fill="Beige" StrokeThickness="2" Stroke="Red" />
</Grid>
</Grid>
Note: you don't need HorizontalAlignment="Stretch" VerticalAlignment="Stretch" for rectangles -- thay are stretching by default. And specifying VerticalAlignment="Stretch" along with Height="200" doesn't make sense anyway.
Update: And the problem in your inital code is here:
<StackPanel Orientation="Vertical" ... >
<StackPanel Orientation="Horizontal" ...>
<Grid>
Grid tries to occupy all available space. What space is available? You have two nested stackpanels: one doesn't stretch vertically and another doesn't stretch horizontally. So, the grid with no Height or Width specified has zero space available. If you remove Height="200" from rectangles, you may see that your grid is zero-sized.
I have the following XAML:
<Grid HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="1" >
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="0*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<PasswordBox HorizontalAlignment="Center" Grid.Row="0" Margin="12" Width="260" Height="32" PlaceholderText="Confirm Password" BorderBrush="#FF755CB0" BorderThickness="1" Opacity="0.9" x:Name="ConfirmPassword"/>
<Button Content="Sign-Up" HorizontalAlignment="Center" Margin="12" Grid.Row="1" Width="260" Height="50" Background="#FF235085" BorderBrush="#FF6749AC" BorderThickness="1" Foreground="White" Opacity="0.9" RequestedTheme="Light" Click="Register_Click"/>
</Grid>
Right now the grid is at the center of the screen, I wabt it to be a little bit higher, I can do it with margin, but I don't want any propery with pixel in my page. Is there any other wahy to do it?
Thanks.
The easiest way to get your grid slightly above the centre without using Margins would be to put it in another Grid.
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="1.2*"/>
</Grid.RowDefinitions>
<Grid HorizontalAlignment="Center" VerticalAlignment="Top" Grid.Row="1" >
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="0*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<PasswordBox HorizontalAlignment="Center" Grid.Row="0" Margin="12" Width="260" Height="32" PlaceholderText="Confirm Password" BorderBrush="#FF755CB0" BorderThickness="1" Opacity="0.9" x:Name="ConfirmPassword"/>
<Button Content="Sign-Up" HorizontalAlignment="Center" Margin="12" Grid.Row="1" Width="260" Height="50" Background="#FF235085" BorderBrush="#FF6749AC" BorderThickness="1" Foreground="White" Opacity="0.9" RequestedTheme="Light" Click="Register_Click"/>
</Grid>
</Grid>
Note the second RowDefinition
<RowDefinition Height="1.2*"/>
This means the second row will take slightly more of the available space than the first row and you can adjust to meet your needs.
I have a grid inside stackpanel which is inside a listbox.
This grid has a few control elements like rectangles and textblocks.
They stretch to the entire width in portrait but not in landscape.
Snapshot of emulator
This is the XAML:
<ListBox Name="PassList" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel HorizontalAlignment="Stretch">
<Grid Name="StackPanelWidth" Width="{Binding ElementName=PassList, Path=ActualWidth}">
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="40"/>
<RowDefinition Height="40"/>
<RowDefinition Height="40"/>
<RowDefinition Height="20"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="{Binding ElementName=StackPanelWidth, Path=ActualWidth}"/>
<ColumnDefinition Width="10"/>
</Grid.ColumnDefinitions>
<Rectangle Fill="White"
Grid.Row="0"
Grid.Column="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
RadiusX="10"
RadiusY="10"
/>
<Rectangle Fill="White"
Grid.Row="0"
Grid.Column="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Margin="0,10,0,0"
/>
<Rectangle Fill="DarkGray"
Grid.Row="0"
Grid.Column="1"
Height="1"
VerticalAlignment="Bottom"
/>
<TextBlock Name="Country"
Grid.Row="0"
Grid.Column="1"
HorizontalAlignment="Left"
Margin="10,0,0,0"
VerticalAlignment="Center"
Text="{Binding Country}"
Foreground="Black"
FontWeight="Bold"
/>
.............
.............
</Grid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Is there any thing wrong with my code?
Any help will be appreciated.
Thanks.
why are you doing this?
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="{Binding ElementName=StackPanelWidth, Path=ActualWidth}"/>
<ColumnDefinition Width="10"/>
</Grid.ColumnDefinitions>
Here you are somehow specifying the width because of which its not resizing.
Also the stackpanel will automatically adjust to its child width, so no need to specify binding if thats what you were trying to do.
I am creating an app in Silverlight 4 with MVVM Light.
At present I have a page with many controls ie. StackPanels, Listbox, TexBlocks and Buttons. I have a busyindicator on the page that is bound to a viewmodel. When a button is clicked to say retrieve data from the database the busyindicator displays and vanishes when the call is completed.
This all works as it should.
What I want to happen is that the whole page is wrapped in the busyindicator so that the page dims and nothing works until the event is completed. I have read that you just wrap the control inside the Busyindicator.
No matter where I place the opening of the indicator I get blue lines showing 'The property Content is set more than once.'
I have posted the code below, could anyone explain where to put the indicator code.
<Grid.RowDefinitions>
<RowDefinition Height ="0" />
<RowDefinition Height ="30" />
<RowDefinition Height ="60" />
<RowDefinition Height ="Auto" />
<RowDefinition Height ="40" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="1" Grid.Column="0" Text="Header" Width="353" Margin="0 0 0 0" Height="30" />
<StackPanel Grid.Row="2" VerticalAlignment="Center" Orientation="Horizontal" >
<Button Grid.Row="2" Grid.Column="0" Content="GetData" Height="35" Width="130" HorizontalAlignment="Left" Margin="0,0,0,0" Command="{Binding GetData}"></Button>
<!-- <toolkit:BusyIndicator Width="150" Height="50" IsBusy="{Binding IsBusy}" BusyContent="Searching ..." /> -->
</StackPanel>
<ListBox x:Name="MyListBox" Grid.Row="3">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="400"></ColumnDefinition>
<ColumnDefinition Width="70"></ColumnDefinition>
<ColumnDefinition Width="10"></ColumnDefinition>
<ColumnDefinition Width="70"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" VerticalAlignment="Center" Text="{Binding Name}"></TextBlock>
<Button Grid.Row="0" Grid.RowSpan="2" Grid.Column="3" Content="Delete" VerticalAlignment="Center"
Command="{Binding Delete}"></Button>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<TextBlock Grid.Row="4" Margin="5,10,0,0" Text="{BindingMessage}"></TextBlock>
</Grid>
You need to put all the content inside the user control as shown below:
<toolkit:BusyIndicator Width="150" Height="50" IsBusy="{Binding IsBusy}" BusyContent="Searching ...">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height ="0" />
<RowDefinition Height ="30" />
<RowDefinition Height ="60" />
<RowDefinition Height ="Auto" />
<RowDefinition Height ="40" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="1" Grid.Column="0" Text="Header" Width="353" Margin="0 0 0 0" Height="30" />
<StackPanel Grid.Row="2" VerticalAlignment="Center" Orientation="Horizontal" >
<Button Grid.Row="2" Grid.Column="0" Content="GetData" Height="35" Width="130" HorizontalAlignment="Left" Margin="0,0,0,0" Command="{Binding GetData}"></Button>
</StackPanel>
<ListBox x:Name="MyListBox" Grid.Row="3">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="400"></ColumnDefinition>
<ColumnDefinition Width="70"></ColumnDefinition>
<ColumnDefinition Width="10"></ColumnDefinition>
<ColumnDefinition Width="70"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" VerticalAlignment="Center" Text="{Binding Name}"></TextBlock>
<Button Grid.Row="0" Grid.RowSpan="2" Grid.Column="3" Content="Delete" VerticalAlignment="Center" Command="{Binding Delete}"></Button>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<TextBlock Grid.Row="4" Margin="5,10,0,0" Text="{BindingMessage}"></TextBlock>
</Grid>
</toolkit:BusyIndicator>