I have a series of TextBlocks that all need to have their text wrapped, but when placed in a Horizontal StackPanel none of the TextBlock's text is wrapped. Originally I just had a StackPanel of several TextBlocks which worked fine, but I added a bullet to each TextBlock for easier reading, and therefore with my new implementation I lost the wrapping ability
<StackPanel Grid.Row="0" Orientation="Horizontal">
<TextBlock Text="•"/>
<TextBlock x:Name="InstructionsTextBlock1" Margin="12,0,12,0" TextWrapping="Wrap"
Text="{Binding Path=LocalizedResources.InstructionsPage_InstructionsTextBlock1, Source={StaticResource LocalizedStrings}}">
<LineBreak></LineBreak>
</TextBlock>
</StackPanel>
How might I wrap the text in the second TextBlock within the Horizontal StackPanel?
I ended up removing the StackPanel implementation all together, and creating a grid whereby I had 2 Columns and enough Rows for each bullet/textblock combination. I then set the first column to a small width, and the other column to the remaining width. I then added each bullet/textblock combination accordingly.
<ScrollViewer>
<Grid Margin="12,0,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".025*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="•"/>
<TextBlock Grid.Row="0" Grid.Column="1" x:Name="InstructionsTextBlock1" Margin="12,0,12,0" TextWrapping="Wrap"
Text="{Binding Path=LocalizedResources.InstructionsPage_InstructionsTextBlock1, Source={StaticResource LocalizedStrings}}">
<LineBreak></LineBreak>
</TextBlock>
...
</Grid>
</ScrollViewer
Related
I'm unable to get the Gridsplitter to function with the following example code. The grid splitter does not move or resize the surrounding "Top" and "Buttom" grid rows which are set to fill available space:
<Grid Width="Auto" Height="Auto">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Top</TextBlock>
</Grid>
<Grid Grid.Row="1">
<GridSplitter Height="5" HorizontalAlignment="Stretch" ResizeDirection="Rows"/>
</Grid>
<Grid Grid.Row="2">
<TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Bottom</TextBlock>
</Grid>
</Grid>
Edit: As Clemens says, your GridSplitter has to be a direct child of the grid that you want to split. You are putting a new Grid into row 1 of the parent grid when you do:
<Grid Grid.Row="1">
<GridSplitter Height="5" HorizontalAlignment="Stretch" ResizeDirection="Rows"/>
</Grid>
You need to put the splitter directly into the parent grid that you want to split and declare the row in the element tag:
<Grid Width="Auto" Height="Auto">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<TextBlock Grid.Row="0" FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Top</TextBlock>
<GridSplitter Grid.Row="1" Height="5" HorizontalAlignment="Stretch" ResizeDirection="Rows"/>
<TextBlock Grid.Row="2" FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Bottom</TextBlock>
</Grid>
Just remove the Grids that are useless:
<Grid Width="Auto" Height="Auto">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Top</TextBlock>
<GridSplitter Grid.Row="1" Height="5" HorizontalAlignment="Stretch" ResizeDirection="Rows"/>
<TextBlock FontSize="55" Grid.Row="2" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Bottom</TextBlock>
</Grid>
EDIT :
For clarity: the GridSplitter control resizes just elements at its same level in Grid children hierarchy. You can put whatever you want inside the grid, but you have to put the GridSplitter to the same level of the control you want to resize.
You can still do this:
<Grid Width="Auto" Height="Auto">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid>
<TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Top</TextBlock>
</Grid>
<GridSplitter Grid.Row="1" Height="5" HorizontalAlignment="Stretch" ResizeDirection="Rows"/>
<Grid Grid.Row="2">
<TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Bottom</TextBlock>
</Grid>
</Grid>
But the GridSplitter has to be at the same level of the control you want to resize.
I am having a grid which contains six rows(each row is a stack Layout).
Inside my fifth row(i.e 5th stack layout) I am having a grid.I gave 100% width for that grid, but that grid is not occupying 100% of the width.
How do I fix this problem?
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Vertical">
</StackPanel>
<StackPanel Grid.Row="1" Orientation="Vertical">
</StackPanel>
<StackPanel Grid.Row="2" Orientation="Vertical">
<Grid Width="100%">
</Grid>
</StackPanel>
<StackPanel Grid.Row="3" Orientation="Vertical">
</StackPanel>
</Grid>
I think , you can try removing the stack panel and you can use Grid.Row on Grid and that would fix the issue.
I haven't see percentages used in UWP before and even think it is not a valid syntax. I think you should use HorizontalAlignment="Stretch" instead to stretch the Grid to full width.
#Martin Zikmund and #Durai Amuthan.H's suggestions were all correct. The Width=100% in UWP XAML layout doesn't support.
If you want to make the Grid's has the same width as the StackPanel and automatically resize when the window resized, you could also remove the Width directly like the following:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Vertical">
</StackPanel>
<StackPanel Grid.Row="1" Orientation="Vertical">
</StackPanel>
<StackPanel Grid.Row="2" Orientation="Vertical">
<Grid Background="Red">
<TextBlock Text="abc"></TextBlock>
</Grid>
</StackPanel>
<StackPanel Grid.Row="3" Orientation="Vertical">
</StackPanel>
</Grid>
I have a grid containing an Image (with 2 rows top and bot that I will use later) and another grid containing 4 radio button.
When I resize, if the grid's height is greater than image, I have 2 whites rows around the image :
But if the height is smaller, the image is not correctly displayed and my buttons disappear :
What can I do to keep buttons on screen and add white columns right and left to see the entire image ?
There is my code :
<Grid Grid.Column="2">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Image Grid.Row="1"
Source="{Binding Picture}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"/>
<Grid Grid.Row="3">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<RadioButton Grid.Column="0" Grid.Row="0" Background="Red" Content="Point 1" IsChecked="{Binding SelectedPointIndex, ConverterParameter=1, Converter={StaticResource IndexBooleanConverter}}" />
<RadioButton Grid.Column="1" Grid.Row="0" Background="Green" Content="Point 2" IsChecked="{Binding SelectedPointIndex, ConverterParameter=2, Converter={StaticResource IndexBooleanConverter}}"/>
<RadioButton Grid.Column="1" Grid.Row="1" Background="Blue" Content="Point 3" IsChecked="{Binding SelectedPointIndex, ConverterParameter=3, Converter={StaticResource IndexBooleanConverter}}"/>
<RadioButton Grid.Column="0" Grid.Row="1" Background="Yellow" Content="Point 4" IsChecked="{Binding SelectedPointIndex, ConverterParameter=4, Converter={StaticResource IndexBooleanConverter}}"/>
</Grid>
</Grid>
You have simple layout problem. If you want something to take guaranteed space, use Auto, it take precedence over stars (stars are distributing leftover space, they get nothing if there is none).
You need following layout:
<Grid> <!-- high level container to ensure buttons grid is visible -->
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="auto" /> <!-- this row take precedence over first one -->
</Grid.RowDefinitions>
<Grid Grid.Row="0" ... > <!-- image grid -->
...
<Image ... />
</Grid>
<Grid Grid.Row="1"> <!-- buttons grid -->
...
<RadioButton ... />
</Grid>
</Grid>
And demo
For row with the image set <RowDefinition Height="*"/> instead of <RowDefinition Height="auto"/>. If you would like to leave spaces between image and radio button, I see your additional rows, set its height to fixed size.
Explanation:
'auto' guarantee that row of the grid will has height equals to height of the child content. If you would like to affect to size content via size of the parent control dynamically, you should use 'N*', where N - number.
For instance:
<Grid.RowDefinitions>
<RowDefinition Height="*"/> <!-- 25% of the rest of space -->
<RowDefinition Height="2*"/> <!-- 50% of the rest of space -->
<RowDefinition Height="*"/> <!-- 25% of the rest of space -->
<RowDefinition Height="auto"/> <!-- As result is static value. Height equals to height that's needed to display child content -->
</Grid.RowDefinitions>
I have a problem with my application. I want tomake a page, that will be show user notifications in the Grid. At the left side will be profile picture, at the right side profile name, message contents and time.
I have a problem with the TextBlock which contains message content.
TextWrapping doesn't seem to work. Message contents are displayed in single line, and they are cut in half.
<ListBox Name="listaWpisow" SelectionChanged="listaWpisow_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="0,0,0,10" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="auto"></RowDefinition>
</Grid.RowDefinitions>
<Image Source="{Binding av_url_64, Converter={StaticResource imgConv}}" Height="64" Width="64" Name="pictureBox" Grid.Row="0" VerticalAlignment="Top" HorizontalAlignment="Left"></Image>
</Grid>
<Grid Grid.Column="1" Margin="25,0,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding login}" TextWrapping="Wrap" FontWeight="Bold" Grid.Row="0" Grid.Column="0"></TextBlock>
<TextBlock Text="{Binding content}" TextWrapping="Wrap" Grid.Row="1" Grid.Column="0"></TextBlock>
<TextBlock Text="{Binding datetime_str}" FontSize="12" TextWrapping="Wrap" Grid.Row="2" Grid.Column="0"></TextBlock>
</Grid>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
How to solve this problem?
The problem is that your columns are set to width="Auto" This will let them grow as much as they want In practise this will grow as much as needed to accomodate all the content.
You should change it like so:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"></ColumnDefinition>
<ColumnDefinition Width="3*"></ColumnDefinition>
</Grid.ColumnDefinitions>
This will keep the ratio equal: the second column is three times the width of the first. (you should tweak this to your specific need)
Note that this needs to be done on your outer-grid since the outer grid lets the inner grid grow as much as needed, and the innergrid grows as much as needed to accomodate the long text in the textbox
I'd like to create a custom WPF accordion-like control without using WPF toolkit... After some searching it seems like the best approach would be to use an Expander... so I wanted to just see if I could get some sort of basic functionality like getting a row to expand upward to show some content when it is expanded and then to have it collapse and hide that content. It seems like it should be pretty straight-forward but my expander never expands. Here's my basic example:
<Grid Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="1*"></RowDefinition>
<RowDefinition Height="24"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="215"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Expander Grid.Row="3" Grid.ColumnSpan="2" Header="More Options" ExpandDirection="Down" Background="Red" IsExpanded="False">
<StackPanel Height="300">
<CheckBox Margin="4" Content="Option 1" />
<CheckBox Margin="4" Content="Option 2" />
<CheckBox Margin="4" Content="Option 3" />
</StackPanel>
</Expander>
</Grid>
Update your RowDefinitions. Currently, the Row that the Expander is in is hard-coded to have a Height of 24. Make it Auto.
<Grid.RowDefinitions>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="1*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>