how to give height of a parent to child in UWP - c#

I have a stack panel and it has one grid and I'd like the grid to have same height as stack panel.
I tried playing with VerticalAlignment stretch or height 100% nothing works
I tried setting the values programatically OnNavigatedTo but it doesn't have the effect
Any suggestions to resolve this are welcome
Please find the code below
<StackPanel Grid.Row="0" Grid.RowSpan="4" Background="#CFFF" Visibility="Visible" Orientation="Vertical" Name="ProgressOverlay">
<Grid Name="Overlaygrid"">
<StackPanel VerticalAlignment="Center" Grid.Row="0">
<ProgressBar
IsIndeterminate="True"
IsEnabled="True" Foreground="Black"/>
<TextBlock Visibility="Visible" Foreground="Black" FontSize="25” T HorizontalAlignment="Center" Text="Loading"/>
</StackPanel>
</Grid>
</StackPanel>

A StackPanel takes by default the size needed by its content and shrinks to the size required, while a container control like Grid stretches to the full size available (e.g full page).
If you want to keep the outer StackPanel, you will have to set VerticalAlignment="Stretch" on the StackPanel, not on the Grid.
But since the Grid is the only single content item in your outer StackPanel, you can remove it and move the properties Grid.RowSpan="4" Background="#CFFF" Visibility="Visible" to the Grid. Always try to keep your XAML structure as simple as possible.

Related

TabControl position TabItems

I have TabControl.
I want move tabs to the left but window with content should not change the size.
Result:
My code:
<controls:TabControl Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="3" x:Name="MyTabControl" BorderBrush="Transparent" BorderThickness="0" Padding="0">
<controls:TabControl.Resources>
<DataTemplate x:Key="ClosableTabItem">
<StackPanel Orientation="Horizontal">
<TextBlock x:Name="textBlockName" VerticalAlignment="Center" Text="{Binding}"/>
<HyperlinkButton Margin="6,0,0,0" x:Name="tabItemClose" VerticalAlignment="Center"
Click="tabItemClose_Click">
</HyperlinkButton>
</StackPanel>
</DataTemplate>
</controls:TabControl.Resources>
<controls:TabItem Header="Main" x:Name="MainTabItem" ToolTipService.ToolTip="Main" >
</controls:TabItem>
</controls:TabControl>
I won't really post a huge answer with a lot of XAML , rather i will give you some basic ideas of what you can do :)
1.Inside each tabitem,just add a grid and create two columns.Place every required element in the middle column and make sure the Grid's HorizontalAlignment and VerticalAlignment are set to Stretch
You can customize the template of your tabcontrol and set required width/margin of TabPenl/ContentPresenter.
I think 1 is the easiest solution so far,if you want to use 2 , leave a comment and i'll add some helpful XAML
Hope this helps :)

Scrollable textbox in WPF won't scroll because it's bigger than the container

This textbox never lets me scroll. I am fairly certain it's because it is vertically expanding to "show" all the text. However, it is expanding past (and underneath) the bottom of the grid row it's in, so the text is not being displayed - yet the scroll bars are disabled (because it thinks there is no reason to show them).
The result is I see the top of the text in the file, and it gets cut off when it reaches the bottom of the grid cell it's in.
What do I need to do to tell the control: "Expand to the width and height of the grid cell you're in, and show the vertical scroll bar when the text won't fit in that space"?
<StackPanel Grid.Column="1" Grid.Row="1">
<ScrollViewer CanContentScroll="True" VerticalScrollBarVisibility="Visible">
<TextBlock x:Name="longText" Foreground="White" FontFamily="Times New Roman" FontSize="24" TextWrapping="Wrap" />
</ScrollViewer>
</StackPanel>
If you change it to this it will work.
<ScrollViewer Grid.Column="1" Grid.Row="1" VerticalScrollBarVisibility="Auto">
<StackPanel>
<TextBlock x:Name="longText" Foreground="White" FontFamily="Times New Roman" FontSize="24" TextWrapping="Wrap" />
</StackPanel>
</ScrollViewer>
But in same time you have to make sure that your grids height is set to * or a fixed size:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/> //Or whatever size you want
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ScrollViewer Grid.Column="1" Grid.Row="1" VerticalScrollBarVisibility="Auto">
<StackPanel>
<TextBlock x:Name="longText" Foreground="White" FontFamily="Times New Roman" FontSize="24" TextWrapping="Wrap" />
</StackPanel>
</ScrollViewer>
</Grid>
Btw, your StackPanel is redundant unless you have more controls inside it.
EDIT:
Well... First of all like mm8 and user2837961 explained a Scrollviewer doesn't make sense inside a StackPanel, because StackPanel can get expanded infinite. ScrollViewer only works when the object inside it are bigger than the size if it self. By giving your Grid row the size of *, you assign the remaining space of the grid for that row, means that items belonging to that row gets a fixed size. And if your Textbox is bigger than the ScrollViewer size the ScrollBarVisibility will be triggered.
Why do you need a StackPanel? I suggest you remove it and place the Grid.Column and Grid.Row in the ScrollViewer:
<ScrollViewer Grid.Column="1" Grid.Row="1" CanContentScroll="True" VerticalScrollBarVisibility="Visible">
<TextBlock x:Name="longText" Foreground="White" FontFamily="Times New Roman" FontSize="24" TextWrapping="Wrap" />
</ScrollViewer>
Putting ScrollViewers inside StackPanels is a bad idea. This is because a StackPanel measures its children with infinite horizontal space if its Orientation property is set to Horizontal and infinite vertical space if it is set to Vertical. Please refer to my answer here for more information about this:
Horizontal scroll for stackpanel doesn't work
This basically means that the ScrollViewer element has an infinite height here and thus no vertical scrollbar is displayed.
So, as suggested by #user2837961, you should simply get rid of the StackPanel:
<ScrollViewer Grid.Column="1" Grid.Row="1" VerticalScrollBarVisibility="Visible">
<TextBlock x:Name="longText" Foreground="White" FontFamily="Times New Roman" FontSize="24" TextWrapping="Wrap" />
</ScrollViewer>
Also make sure that there is no other StackPanel further up the visual tree.

Change size of Progress Bar

I have progress bar but dots too small, how I can make it bigger?
I didnt found any property witch can change size of dots. Height/Width change onlly area where dots can move
Xaml code
<Grid // here width ="2560" height="1600"
<ProgressBar
Grid.Row="0"
Grid.Column="1"
IsIndeterminate="True"
Visibility="{Binding MainInstance.Loading, Converter={StaticResource BooleanToVisibilityConverter}}"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"/>
</Grid
There are several options to solve this, it's up to you which one you pick:
Change the default style of ProgressBar and increase the Ellipse Width and Height properties. You can do this in Blend or by copying the style from
C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.14393.0\Generic\generic.xaml
Use a ViewBox control to wrap around the ProgressBar. This control resizes all content to the available size.
Create a templated control with your own template settings properties.
I have created a small sample on GitHub to show you the code for all possibilities.
Easiest way to change ProgressBar's dots size is to use ScaleTransform:
<ProgressBar ...>
<ProgressBar.RenderTransform>
<ScaleTransform ScaleX="2" ScaleY="2" />
</ProgressBar.RenderTransform>
</ProgressBar>
In my case (WinUI3 SDK1.1.0) I have had a thin 1px-line and it helped me to use the MinHeight property instead of the Height. I hope that MinHeight also will help you with the dotted line.
<StackPanel BorderThickness="0" BorderBrush="LightGray" Padding="12">
<muxc:ProgressBar
Value="{x:Bind Path=XamlProductionViewModel.XamlCurrentProgress, Mode=OneWay}"
IsIndeterminate="{x:Bind Path=XamlProductionViewModel.XamlIsIndeterminate, Mode=OneWay}"
Visibility="{x:Bind Path=XamlProductionViewModel.XamlProgressVisibility, Converter={StaticResource booleanToVisibilityConverter}, Mode=OneWay}"
Foreground="AliceBlue"
Background="Transparent"
Minimum="0"
Maximum="100"
BorderThickness="0"
Margin="0"
MinHeight="25"
Width="300"/>
</StackPanel>
ProgressRing not support any property to change the dots width and height ,and when the ProgressRing have a bigger space the dots will be biggest.
You can use the Grid which get a ProgressBar and the Grid is permanent position.
You use the Grid.Row="0" Grid.Column="1" VerticalAlignment="Top" and you should write the code in Grid.You should give the Grid big space.
ProgressBar should use HorizontalAlignment="Stretch" and the same of VerticalAlignment.You have a big width and big height the dots will have a big width and big height.
<ProgressRing Margin="10,10,10,10"
IsActive="True"
Visibility="{x:Bind View.Visibility,Mode=OneWay}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" />
I write in the top Grid.You can see my app's ProgressRing have a big dots.
http://jycloud.9uads.com/web/GetObject.aspx?filekey=16bcfec973e910632e04b3990c274a1c

XAML WP8 and making a 'TextBlock' scroll down

Alright, so I have a XAML page with a TextBlock in a Windows Phone 8 application. My dilemma is this:
I pragmatically add more content (formatted lines with Inlines.Add(new Run...) to the TextBlock. The text block is currently filled from bottom to up because of the ScrollViewer in the sense that a line appears in the bottom after another. I would also be fine with them starting to appear from the top as long as the TextBlock would continue to scroll down (actually this might look better) once it is full. My TextBlock is inside a ScrollViewer as below:
<Popup x:Name="send_message_xaml" Grid.Row="1" VerticalOffset="0" Width="750" Height="auto">
<StackPanel Orientation="Vertical" Margin="0,0" Width="auto" Height="auto">
<ScrollViewer Height="345" HorizontalAlignment="Left" Margin="0,0,0,0" Name="scrollViewer1" VerticalAlignment="Bottom" Width="420" VerticalScrollBarVisibility="Auto">
<TextBlock x:Name="message_log" Margin="40,50,0,0" TextWrapping="Wrap" Width="420" VerticalAlignment="Top" FontSize="22"/>
</ScrollViewer>
<TextBox x:Name="message_to_send" InputScope="Chat" Width="480" KeyDown="message_to_send_KeyDown" Margin="15,0"/>
</StackPanel>
</Popup>
How can I get the textblock to scroll so that the newest appended message is always at the bottom? I found a bunch of these threads but none seem to solve my problem so far. Do I need to add some code somewhere with the appending?
You need to update the VerticalOffset based on the ScrollableHeight. When you add new inlines to the TextBlock, its height is going to change and that will notify the parent ScrollViewer. So, after you add new items to the inlines, run the Measure method and update the VerticalOffset.
Here is an example.

Scroll Vertically inside ListView when ListView is VerticalAlignment="Stretch"

How do we get the ListView to behave properly? I am trying to scroll vertically inside my ListView, and I was eventually able to get something to scroll vertically, but the ListView keeps expanding in height! and setting MaxHeight doesn't do anything.
<StackPanel x:Name="ActivityLog" Margin="0, 201, 0, 0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<ScrollViewer ScrollViewer.VerticalScrollBarVisibility="Visible">
<ListView x:Name="ActivityList" ItemsSource="{Binding Activities}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" BorderBrush="{x:Null}" HorizontalContentAlignment="Center" FontSize="14">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Message}" Background="{x:Null}" HorizontalAlignment="Stretch" Padding="5" TextAlignment="Center" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.CanContentScroll="True" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ScrollViewer>
</StackPanel>
I am at a loss. Please help. How do I get the listview to just scroll vertically only, and never change in height, and never display the horizontal scrollbars?
Remove the StackPanel. That prevents the ListView (or any other children) to have a delimited size. That's why you're not getting any scrollbars, because the ListView has an infinite height, as layout-ed by the StackPanel.
Besides, having a StackPanel with only 1 child makes no sense. It's supposed to "stack" its children.
Edit: Also remove the ScrollViewer, as the ListView already has a ScrollViewer inside of it as per the default Template. Unless of course you had changed the Default ControlTemplate for that.

Categories

Resources