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>
Related
I'm trying to prototype a new custom control that has a left button, text, and right button.
The XAML looks like this:
<StackPanel Width="250" Orientation="Vertical" >
<DockPanel Background="Azure" Width="250">
<Button Name="btnLeft" HorizontalAlignment="Left" Width="30" Background="DarkGray" Click="btnAdd_Click" Template="{DynamicResource StandardButtonTemplate1}">
<StackPanel Orientation="Horizontal">
<Image Source="/Images/Previous25px.png" VerticalAlignment="Center" Name="imgLeft"></Image>
</StackPanel>
</Button>
<TextBlock Name="tblkModelType" HorizontalAlignment="Center" Foreground="Black" FontSize="20">Import</TextBlock>
<Button Name="btnRight" HorizontalAlignment="Right" Width="30" Background="DarkGray" Click="btnAdd_Click" Template="{DynamicResource StandardButtonTemplate1}" >
<StackPanel Orientation="Horizontal">
<Image Source="/Images/Next25px.png" VerticalAlignment="Center" Name="imgRight"></Image>
</StackPanel>
</Button>
</DockPanel>
</StackPanel>
The buttons are left and right justified ok, but the (tblkModelType) is left justified right up next to the left button. It doesn't appear that HorizontalAlignment on that tag does anything. If I remove the right button, the TextBlock does center.
Anyone know how to get the buttons on the outside and the TextBlock centered in the Dockpanel? I guess I could use a grid, but it would make the rest of the control more complex.
This should work:
<DockPanel Background="Azure" Width="250" >
<Button DockPanel.Dock="Left" Name="btnLeft" Width="30" Background="DarkGray" Click="btnAdd_Click" Template="{DynamicResource StandardButtonTemplate1}">
<StackPanel Orientation="Horizontal">
<Image Source="/Images/Previous25px.png" VerticalAlignment="Center" Name="imgLeft"></Image>
</StackPanel>
</Button>
<Button DockPanel.Dock="Right" Name="btnRight" Width="30" Background="DarkGray" Click="btnAdd_Click" Template="{DynamicResource StandardButtonTemplate1}" >
<StackPanel Orientation="Horizontal">
<Image Source="/Images/Next25px.png" VerticalAlignment="Center" Name="imgRight"></Image>
</StackPanel>
</Button>
<TextBlock DockPanel.Dock="Top" HorizontalAlignment="Center" Name="tblkModelType" Foreground="Black" FontSize="20">Import</TextBlock>
</DockPanel>
Use DockPanel.Dock to dock btnLeft to the left of the DockPanel, btnRight to the right. Then for tblkModelType set DockPanel.Dock="Top". This will stretch the TextBlock to the entire width of the DockPanel between buttons.
This works for me. As you said your control is more complex, so in case of any problem share more xaml with us.
Why won't my TextBox fill the available space in its DockPanel parent? I expected it to stretch to fill the remaining horizontal space. The Button is attached to the right nicely. I've got this at the top of my Window:
<DockPanel Margin="20,10,20,0" DockPanel.Dock="Top" >
<TextBox TextWrapping="Wrap" Text="{Binding Input}" Background="#FFE4EBFF" Margin="0,0,5,0" />
<Button Content=" _Evaluate" IsDefault="True" HorizontalAlignment="Right" DockPanel.Dock="Right" />
</DockPanel>
The TextBox attaches to the left but is about 5 pixels wide. It's the last child, and has the defaults DockPanel.Dock=Left, HorizontalAlignment=Stretch. I've tried other dock and alignment values without success. Is TextBox an exception to the usual layout rules?
When you set DockPanel.LastChildFill=true
What is the last child you're adding?
The button.
Not the textbox.
Order is top (first) to bottom (last).
I'm not sure exactly what result you want but maybe you just need to make the textbox the last child:
<DockPanel Margin="20,10,20,0" DockPanel.Dock="Top" >
<Button Content=" _Evaluate" IsDefault="True" HorizontalAlignment="Right" DockPanel.Dock="Right" />
<TextBox TextWrapping="Wrap" Text="{Binding Input}" Background="#FFE4EBFF" Margin="0,0,5,0" />
</DockPanel>
This seems to work for me:
<DockPanel Margin="20,10,20,0" DockPanel.Dock="Top" LastChildFill="True">
<Button Content=" _Evaluate" IsDefault="True" HorizontalAlignment="Right" DockPanel.Dock="Right" />
<TextBox TextWrapping="Wrap" Text="{Binding Input}" Background="#FFE4EBFF" Margin="0,0,5,0" />
</DockPanel>
I am trying to fill the TextBox height for all remaining space in the DockPanel but no success. I have not even found a successful example code doing this stuff.
Here is what I have done:
<Grid x:Name="LayoutRoot">
<DockPanel Background="Red" LastChildFill="True" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Button DockPanel.Dock="Bottom" Content="Save" Width="100" Height="50" HorizontalAlignment="Right" Margin="10 5"/>
<TextBox AcceptsReturn="True"
AcceptsTab="True"
Margin="5 10"
TextWrapping="Wrap"/>
</DockPanel>
</Grid>
Am I missing something?? I have also tried VerticalAlignment property to Stretch of TextBox, no success. Below is the output window.
Try this,set your textbox style to NULL and check whether its working fine.
<DockPanel Background="Red" LastChildFill="True" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Button DockPanel.Dock="Bottom" Content="Save" Width="100" Height="50" HorizontalAlignment="Right" Margin="10 5"/>
<TextBox AcceptsReturn="True" AcceptsTab="True" Margin="5 10" TextWrapping="Wrap" Style="{x:Null}"/>
</DockPanel>
To get the textbox to autosize without having to mess with the Style you can simply set your height back to Double.NaN. The xaml below is stripped to only show the relevant bits.
<DockPanel LastChildFill="True">
<Button DockPanel.Dock="Bottom"/>
<TextBox Height="NaN"/>
</DockPanel>
I need a way to align a label to right and align an image to right. I tried this code:
<Button HorizontalAlignment="Left" Margin="11,265,0,0" VerticalAlignment="Top" Width="190" Height="51">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
<Image Source="Resources/Accept-icon.png" Stretch="Uniform" HorizontalAlignment="Left"/>
<Label Content="ذخیره" HorizontalContentAlignment="Right" VerticalAlignment="Center" FontFamily="2 badr" FontSize="20"/>
</StackPanel>
</Button>
But I see label sticks to image.
Also is there any way to have some parameter like cell padding (from right/left/top/bottom)?
Try using a DockPanel instead
<Button HorizontalAlignment="Left" Margin="11,265,0,0" VerticalAlignment="Top" Width="190" Height="51">
<DockPanel HorizontalAlignment="Stretch">
<Image Source="Resources/Accept-icon.png" Stretch="Uniform" DockPanel.Dock="Left"/>
<Label Content="ذخیره" DockPanel.Dock="Right" VerticalAlignment="Center" FontFamily="2 badr" FontSize="20"/>
</DockPanel>
</Button>
For your padding question, which element are you trying to pad?
try using Grid instead of StackPanel
<Grid>
<Image ... HorizontalAlignment="Left"/>
<Label ... HorizontalAlignment="Right"/>
</Grid>
there is Padding property which is published by types like Block, Border, Control, and TextBlock so for example it will not be published by Image control, which inherits directly from FrameworkElement, but will be by Label which is a Control
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>