I have a StatusBar that I'd like to house a TextBlock docked to the left and a ProgressBar filling the remaining width. In all my other experiences with the WPF ProgressBar, it will fill its given container, however in this situation it doesn't auto-size at all, it just appears as a tiny circle. Setting its height and width manually work fine, but I'd like it to scale to the remaining width of the StatusBar.
Here's my XAML for the StatusBar:
<StatusBar DockPanel.Dock="Bottom" Height="25">
<StatusBarItem DockPanel.Dock="Left">
<TextBlock x:Name="lblStatus" Margin="5,0,0,0"/>
</StatusBarItem>
<StatusBarItem>
<ProgressBar x:Name="pgbStatus" />
</StatusBarItem>
</StatusBar>
You just need one extra attribute: HorizontalContentAlignment="Stretch" on the StatusBarItem. Thus:
<StatusBar DockPanel.Dock="Bottom" Height="25">
<StatusBarItem DockPanel.Dock="Left">
<TextBlock x:Name="lblStatus" Margin="5,0,0,0"/>
</StatusBarItem>
<StatusBarItem HorizontalContentAlignment="Stretch"> <!-- Note extra attribute -->
<ProgressBar x:Name="pgbStatus" />
</StatusBarItem>
</StatusBar>
Related
I have these items inside a status bar and I can't align the progress bar to the right. All items are inside a grid. Please Help.
<Grid>
<StatusBar HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Height="30"
x:Name="StatusBarBase">
<TextBlock Text="{DynamicResource loading}" x:Name="progressBarTextBlock"/>
<Separator/>
<ProgressBar Width="100" Height="20" x:Name="progressBar"/>
</StatusBar>
</Grid>
StatusBar is an ItemsControl. Items in a StatusBar are defined as StatusBarItem objects.
Place your items in StatusBarItem and set the horizontal alignment for StatusBarItem with ProgressBar.
<!-- Edited indentation to make code more readable. -->
<StatusBar HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Height="30" x:Name="StatusBarBase">
<StatusBarItem>
<TextBlock Text="Text" x:Name="progressBarTextBlock"/>
</StatusBarItem>
<Separator />
<StatusBarItem HorizontalAlignment="Right">
<ProgressBar Width="100" Height="20" x:Name="progressBar"/>
</StatusBarItem>
</StatusBar>
I have a DockPanel, containing a Label with a fixed width and a TextBox with a Min and MaxWidth. I want to align the TextBox to the left and have it stretch until its MaxWidth and have it shrink until its MinWidth (if the Window is resized for example) Like this:
Panel:
<DockPanel LastChildFill="True">
<Label Content="Fixed Width" DockPanel.Dock="Left" />
<TextBox MinWidth="80" MaxWidth="250" DockPanel.Dock="Left" HorizontalAlignment="Left" />
</DockPanel>
However this only aligns the TextBox on the left. If I leave out the HorizontalAlignment it centers.
How can I achieve something like in the screenshot?
Please note that I don't want to use a Grid, since I need to wrap the TextBox at some point below the Label (I'll do this with a Trigger changing the Dock property currently).
Have a look at this solution: https://stackoverflow.com/a/13040678/4625433
You will need to move the MinWidth="80" from the TextBox to the LeftStretchPanel.
<ScrollViewer HorizontalScrollBarVisibility="Auto">
<DockPanel LastChildFill="True" Background="Yellow">
<Label Content="Fixed Width" Background="Red" />
<local:LeftStretchPanel MinWidth="80">
<TextBox MaxWidth="250" Background="Blue" />
</local:LeftStretchPanel>
</DockPanel>
</ScrollViewer>
I put 2 borders inside stackpanel and it should be one border is visible at a time .
I like the visible border to fill stackpanel
<StackPanel>
<Border HorizontalAlignment="Center"
VerticalAlignment="Center"
Visibility="{Binding Title_RoleVisibilty,
Converter={StaticResource WriteRoleVisibilityToVisibilityConverter}}">
<TextBox Text="{Binding Title}" MaxLength="50" />
</Border>
<Border HorizontalAlignment="Center"
VerticalAlignment="Center"
Visibility="{Binding Title_RoleVisibilty ,
Converter={StaticResource ReadRoleVisibilityToVisibilityConverter}}">
<TextBlock Text="{Binding Title }" />
</Border>
</StackPanel>
I used stackpanel /Dockpanel and both not filled the desired border filled
Please advice
The duplication in the borders is adding unnecessary problems. Limit the situation to only one border. Hence you don't have to focus on the border visibility, with only one border and you can the put in styles(?) maybe to focus on the difference needed for the target parameters instead.
For example to solve the problem I have taken your example and added a new binding on MaxLength size which will adjust as needed; for that appears to be the only change required.
<StackPanel>
<Border HorizontalAlignment="Center"
VerticalAlignment="Center" >
<TextBox Text="{Binding Title}" MaxLength="{Binding MaxSize, Converter=???" />
</Border>
</StackPanel>
I have the following XAML which is meant to show an Image and two TextBlocks on top of eachother beside it:
<StackPanel Orientation="Horizontal" >
<Image Source="{Binding CoverArt}" Height="150" />
<StackPanel Orientation="Vertical">
<StackPanel>
<TextBlock FontSize="30" Text="{Binding Title}" TextWrapping="Wrap" />
</StackPanel>
<Grid Width="auto">
<TextBlock FontSize="22" Text="{Binding Summary}" TextWrapping="Wrap" />
</Grid>
</StackPanel>
</StackPanel>
My problem is getting the text to wrap. I've tried using a Grid and assigning the columns' width but it didn't work. Neither did setting the width values to auto. The only thing that works is hard-coding the width, but I do not want that. Thanks.
A Stackpanel will stretch to the size of its content, so it's not what I would use. Use a grid, as explained in the following posts:
TextBlock TextWrapping not wrapping inside StackPanel
Text in StackPanel doesn't wrap (wp7)
TextBlock inside stackpanel does not wrap text
A quick comparison:
Before with stackpanel
After with one grid (You might want to rearrange the elements a bit)
The code for the last segment:
<pre>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Ellipse Fill="red" Width="150" Height="150" />
<StackPanel Grid.Column="1" Orientation="Vertical">
<StackPanel>
<TextBlock FontSize="30" Text="basdljhba dnaiks d., kasndca casn oiäc cas lkcnaso ca dxjwöbdq wkjöbdqw dkjwqb " TextWrapping="Wrap" />
</StackPanel>
<Grid Width="auto">
<TextBlock FontSize="22" Text="dewdewdewdewdewewd" TextWrapping="Wrap" />
</Grid>
</StackPanel>
</Grid>
Did you try setting the width of the columns to fractions instead? width="2*" That will give you some boundaries without a pixel set size. Some way or another you need to set a constraint for the container. If you have two columns and no size is set they will get 50% each. 2* will make give that column 2/3 of the total column with, see example below.
I have a parent container that is used to hold all of my user controls. The issue is that I use VerticalAlignment="Stretch" to stretch contents to the full height and get a vertical scroll bar the user control gets stretched too much. The vertical scrollbar appears but there is no way to scroll. I know this because the down arrow for the scroll bar isn't visible.
I have <ContentControl Content="{Binding Workspace}" /> which is where a variety of controls can be assigned. For example, here is the XAML that is not working property in regards to stretching.
<StackPanel>
<TextBlock Text="{Binding FoundCount}" FontSize="13" Foreground="#666" Margin="0 0 0 8" />
<ScrollViewer VerticalAlignment="Stretch">
<TreeView
ItemsSource="{Binding Listing}"
Grid.Row="1"
BorderThickness="0"
VirtualizingStackPanel.IsVirtualizing="True" />
</ScrollViewer>
</StackPanel>
I only want to the TreeView to stretch and display a vertical scrollbar.
Any ideas?
I suspect the height of the StackPanel is not contrained so it grows to accomodate the ScrollViewer. You can check this by putting a border on the StackPanel.
<Border>
<StackPanel>
<TextBlock Text="{Binding FoundCount}" FontSize="13" Foreground="#666" />
<ScrollViewer VerticalAlignment="Stretch">
<TreeView ItemsSource="{Binding Listing}" BorderThickness="0"
VirtualizingStackPanel.IsVirtualizing="True" />
</ScrollViewer>
</StackPanel>
</Border>