I have some XAML code containing a grid with three columns. In these columns I added three buttons with images. When I increase the width of the screen, the second and third images move evenly towards the right but the first image, the leftmost one, stays put and does not move. It's like its left edge stays stuck to the left and does not move slowly towards the right when I expand the width of the screen.
Here is my code. I cannot figure out how to do this. Sorry I had to use an image, I'm getting the code from my VM.
That's because you didn't bother to set the HorizontalAlignement ofthe buttons,
the default value is Left, that's why the first button wont move, set it to Center
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="80"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Button Grid.Column="0" HorizontalAlignment="Center">
<Image Source="img.png" Stretch="None"></Image>
</Button>
<Button Grid.Column="1" HorizontalAlignment="Center">
<Image Source="img.png" Stretch="None"></Image>
</Button>
<Button Grid.Column="2" HorizontalAlignment="Center">
<Image Source="img.png" Stretch="None"></Image>
</Button>
</Grid>
Related
this is a simple grid with a tiny button in it:
<!--ReverseButton-->
<Grid Grid.Row="1" RowSpacing="0" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<ImageButton
Source="btn_reversed_unpressed"
x:Name="btn_reverse_list_mainmenu"
BackgroundColor="#00000000"
Grid.Column="1"
Clicked="ReverseListForSwipeView"
/>
</Grid>
The size of this Row (row 1) is set here:
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="0.17*" />
<RowDefinition Height="4.5*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
I set the value to 0.17* to have the button always be very tiny. If i would set the row to "auto" the icon would become much bigger (since the source image is bigger in size)
If I make the size to, lets say 0.25* instead of 0.17* the row and therefore the button both get bigger and everything is fine. (Except now it is too big)
But with size 0.17* it is just about right... Well except for this:
It is quite hard to see, but the icon at the bottom is cut of slightly. The border is not as big as it is on the top.
This I have noticed quite some time now.
I tried setting the rowspacing to 0 or even negative values, but nothing worked.
Why is the icon cut off.
The top part isnt cut and both parts (top and bottom) touch the row end and beginning pixel perfect.
An answer based on my comment above. I suggest setting the HeightRequest of the ImageButton to the size you want the icon to be and then just set the row height to Auto and let the layout manager do the rest. See my example where I create a Grid with 3 rows set to Auto size and then just use the HeightRequest property to have it draw at the correct size. I left the grey background of the button in so you can see how the row sizes dynamically.
<ContentPage.Content>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ImageButton Source="ic_email_dark"
Aspect="AspectFit"
HeightRequest="50"
HorizontalOptions="Fill"
VerticalOptions="Center"
Grid.Row="0" />
<ImageButton Source="ic_email_dark"
Aspect="AspectFit"
HeightRequest="75"
HorizontalOptions="Fill"
VerticalOptions="Center"
Grid.Row="1" />
<ImageButton Source="ic_email_dark"
Aspect="AspectFit"
HeightRequest="100"
HorizontalOptions="Fill"
VerticalOptions="Center"
Grid.Row="2" />
</Grid>
</ContentPage.Content>
Gives the following:
My goal is to have a Grid panel that has two columns of controls (each column will contain a vertical StackPanel), where both columns are the same width but auto-sized based on the controls they contain. So both column widths will be equal to the widest control in either column.
I tried doing something like this:
<Grid HorizontalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Content="This is a wide button" HorizontalAlignment="Center" />
<Button Grid.Column="1" Content="Button" HorizontalAlignment="Center" />
</Grid>
The problem here is that the column widths aren't equal. The effect is the same as if I would have specified Width="Auto" for the column definitions. Using a * width only makes the columns equal width if the grid has a HorizontalAlignment of Stretch instead of Center. (Except then the columns aren't auto-sized to the content anymore.)
Am I missing something? Is there a way to get equal-sized column widths based on the content in the grid cells? In a UWP app (so things like UniformGrid aren't available)?
Thats because you have set HorizontalAlignment to "Center" , Grid wont occupy complete page just occupies center part(its horizontal space depends on sum of child elements, in this case it wont add up to fill up whole page.
Just change the HorizontalAlignment = "Stretch" so that whole space available and individual grid components occupy half space.
<Grid HorizontalAlignment="Stretch" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Grid.Column="0"
Content="This is a wide button"
HorizontalAlignment="Center" />
<Button Grid.Column="1"
Content="Button"
HorizontalAlignment="Center"/>
</Grid>
Image:
The Windows Community Toolkit has a Uniform Grid control you can use if you add in the NuGet package.
Telerik RadDataGrid control will help you with your scenario
Add\install Telerik.UI.Xaml.Controls.Grid from Nuget inorder to use RadDataGrid in your UWP App
I've got a Grid that is dynamically sized based on the size of the window it is in. The grid has three children: an Image, a RichTextBlock, and a RichTextBlockOverflow. When the window is sized down enough to ensure that the height of the RichTextBlock becomes 0, the overflow content does not include the first line (which the RichTextBlock couldn't visibly render.
In the sample code below (reduced to just show the essentials), I only see "World" in my overflow.
<Grid MinHeight="200" MinWidth="400">
<Grid.RowDefinitions>
<RowDefinition Height="200" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Image />
<RichTextBlock x:Name="Text" Grid.Row="1" OverflowContentTarget="{Binding ElementName=OverflowText}">
<Paragraph>Hello<LineBreak />World</Paragraph>
</RichTextBlock>
<RichTextBlockOverflow Name="OverflowText" Grid.RowSpan="2" Grid.Column="1" />
</Grid>
Is there any way to ensure that the overflow would have all the text in case the RichTextBlock doesn't have enough space to render the first line?
I am trying to create a windows 8.1 application and wanted to know that is there a control that allows me to create something like popup or messagebox in XAML that covers about 80% of the screen with some margin on either sides of the screen? Like when we click on a button and the screen's brightness gets dim except for the popup that is opened. As an example I have attached an image.Example from windows settings
Other than MessageBox there isn't an in-box control which does this. It's fairly easy to implement yourself in Xaml by creating a Grid with a partially opaque background and your controls in the middle of three rows. In this implementation the rows and columns will size to the controls placed in the center. You could also set those sizes more directly if you prefer.
<Grid Background="{ThemeResource DimmedBrush}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!-- Coloured background for the center row -->
<Rectangle Grid.Row="1" Grid.ColumnSpan="3" Fill="{ThemeResource AppThemeBrush}" />
<!-- User control with the contents in the center row + column -->
<local:MyControls Grid.Row="1" Grid.Column="1" />
</Grid>
There are third party libraries which include controls like this. For example see Callisto's CustomDialog.
I am new to Windows Phone development. I created a grid and added a button to one of the columns, the button does not fill the entire grid column. I am not even able to drag and resize the button control.
This is the code. The button appears at the center of column 0 and is cropped since it tries to fill into column2 as well. The same code seems to work fine in a 8.0 project I downloaded. Can anyone tell me how I can make the button fill the entire column and not spill into the second grid.
Updated code
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="0" Grid.Column="0">Text</Button>
<Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="0" Grid.Column="1">Text</Button>
<Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="0" Grid.Column="2">Text</Button>
<Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="0" Grid.Column="3">Text</Button>
</Grid>
Try adding this to your Button.
HorizontalAlignment="Stretch"
In WP8.1, its default value is Left.
Update
The cut-off issue is because there's a default MinWidth (109) set to the default Button style.
Try removing it by doing this.
MinWidth="0"