StausBar item Width as full width, how we can do

Question

Hi,

I am using Status bar, i have 3 items as statusbaritem.

but problem,  it go one side only, either left or right , so most of space blank.

i would like to make such way that my all 3 status bar equally allign in status bar, from left to right.

i dont know how to do?

below code i am doing , but u ll see after 1st status bar lot of space there.

   <StatusBar VerticalAlignment="Bottom" FocusManager.IsFocusScope="True" x:Name="statusBar"> 
            <StatusBar.ItemsPanel> 
                <ItemsPanelTemplate> 
                    <Grid> 
                        <Grid.RowDefinitions> 
                            <RowDefinition Height="Auto"/> 
                        </Grid.RowDefinitions> 
                        <Grid.ColumnDefinitions> 
                            <ColumnDefinition Width="*"/> 
                            <ColumnDefinition Width="Auto"/> 
                            <ColumnDefinition Width="Auto"/> 
                            <ColumnDefinition Width="Auto"/> 
                            <ColumnDefinition Width="Auto"/> 
                            <ColumnDefinition Width="Auto"/> 
                            <ColumnDefinition Width="Auto"/> 
                            <ColumnDefinition Width="Auto"/> 
                            <ColumnDefinition Width="Auto"/> 
                            <ColumnDefinition Width="Auto"/> 
                            <ColumnDefinition Width="Auto"/> 
                        </Grid.ColumnDefinitions> 
                    </Grid> 
                </ItemsPanelTemplate> 
            </StatusBar.ItemsPanel> 
            <StatusBarItem HorizontalAlignment="Left" HorizontalContentAlignment="Right"> 
                <TextBlock    Background="#FFDFE9F5" TextAlignment="Center" > 
                            <Hyperlink Name="linkGlobalFilters" Click="linkGlobalFilters_Click"> 
                                <TextBlock Name="txtFiltersCnt" Text="No Global Filter(s) Applied"  TextAlignment="Center"  FontSize="10" 
                                               MouseEnter="TextBlock_MouseEnter" MouseLeave="TextBlock_MouseLeave"> 
                                <TextBlock.Style> 
                                    <Style TargetType="TextBlock"> 
                                        <Style.Triggers> 
                                            <Trigger Property="IsMouseOver" Value="True"> 
                                                <Setter Property="TextDecorations" Value="Underline" /> 
                                            </Trigger> 
                                        </Style.Triggers> 
                                    </Style> 
                                </TextBlock.Style> 
                            </TextBlock> 
                            </Hyperlink> 
                             <TextBlock Name="txtNoFiltersCnt" Text="No Global Filter(s) Applied"  TextAlignment="Center"  FontSize="11" 
                                    Visibility="Collapsed"     MouseEnter="TextBlock_MouseEnter" MouseLeave="TextBlock_MouseLeave"> 
                                 </TextBlock> 
                        </TextBlock> 
            </StatusBarItem> 
 
            <Separator Grid.Column="1" Width="3"/> 
 
            <StatusBarItem Grid.Column="2" HorizontalAlignment="Right"> 
                <TextBlock   VerticalAlignment="Center" HorizontalAlignment="Right"  Margin="4,2" Name="txtUserName" Text="txtUserName" FontSize="10" ></TextBlock> 
            </StatusBarItem> 
 
            <Separator Grid.Column="3" Width="3"/> 
 
            <StatusBarItem Grid.Column="4" HorizontalAlignment="Right"> 
                <TextBlock   VerticalAlignment="Center" HorizontalAlignment="Left" Margin="4,2" Name="txtRoleName" Text="txtRoleName" FontSize="10"></TextBlock> 
            </StatusBarItem> 
 
            <Separator Grid.Column="5" Width="3"/> 
 
            <StatusBarItem Grid.Column="6" HorizontalAlignment="Right"> 
                <TextBlock    VerticalAlignment="Center"  Margin="4,2" Name="txtVersion" HorizontalAlignment="Left" Text="txtVersion" FontSize="10"></TextBlock> 
            </StatusBarItem> 
 
 
            <Separator Grid.Column="7" Width="3"/> 
 
            <StatusBarItem Grid.Column="8" HorizontalAlignment="Right"> 
                <TextBlock  VerticalAlignment="Center"  Margin="4,2" Name="txtPublised" Text="txtPublised" HorizontalAlignment="Left" FontSize="10"></TextBlock> 
            </StatusBarItem> 
 
 
            <Separator Grid.Column="9" Width="3"/> 
 
            <StatusBarItem Grid.Column="10" HorizontalAlignment="Right"> 
                <TextBlock Grid.Column="10"  VerticalAlignment="Center"  Margin="3" Name="txtEnv"  Text="txtEnv"  HorizontalAlignment="Left" FontSize="10"></TextBlock> 
            </StatusBarItem> 
 
        </StatusBar>

---

Ashok

Answer 1

You need to edit the ItemsPanelTemplate and change the default DockPanel to a UniformGrid.

Also, changing the HorizontalContentAlignment didn't make any difference, so I restyled the ItemContainerStyle too, to centralise each item in it's section. Once you see how it breaks down, I'm sure you can figure out what suits you best.

 

<Window x:Class="ContextMenuInCode.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Style TargetType="MenuItem">
            <Setter Property="Header" Value="{Binding Header}"/>
            <Setter Property="StaysOpenOnClick" Value="{Binding StaysOpenOnClick}"/>
        </Style>
    </Window.Resources>
    <Grid>
        <StatusBar VerticalAlignment="Bottom" ItemsPanel="{DynamicResource ItemsPanelTemplate1}" HorizontalContentAlignment="Center" ItemContainerStyle="{DynamicResource StatusBarItemStyle1}">
        	<StatusBar.Resources>
        		<ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
        			<UniformGrid IsItemsHost="True"/>
        		</ItemsPanelTemplate>
        		<Style x:Key="StatusBarItemStyle1" TargetType="{x:Type StatusBarItem}">
        			<Setter Property="Padding" Value="3"/>
        			<Setter Property="Background" Value="Transparent"/>
        			<Setter Property="HorizontalContentAlignment" Value="Left"/>
        			<Setter Property="VerticalContentAlignment" Value="Center"/>
        			<Setter Property="Template">
        				<Setter.Value>
        					<ControlTemplate TargetType="{x:Type StatusBarItem}">
        						<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
        							<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
        						</Border>
        						<ControlTemplate.Triggers>
        							<Trigger Property="IsEnabled" Value="false">
        								<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
        							</Trigger>
        						</ControlTemplate.Triggers>
        					</ControlTemplate>
        				</Setter.Value>
        			</Setter>
        		</Style>
        	</StatusBar.Resources>
            <TextBlock Text="Status 1" HorizontalAlignment="Center"/>
            <TextBlock Text="Status 2" HorizontalAlignment="Center"/>
        </StatusBar>
    </Grid>
</Window>

 
Regards,
Pete

---

#PEJL

Answer 2

Thanks for solution.

but there is one issues , if  you have more then 4 items then, after 3 items, other items ll go to next line, 

i want all items in one line.how we can fix?

Thanks

---

Ashok

Answer 3

Hi ashokapex,

You need set Rows = 1, likes: <UniformGrid Rows="1" IsItemsHost="True"/>

best regards,

---

Sheldon _Xiao[MSFT]
MSDN Community Support | Feedback to us
Microsoft
Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Answer 4

it wont allow me to use Separator in between ?

Thanks

---

Ashok

Answer 5

        <StatusBar>
        	<StatusBar.ItemsPanel>
		        <ItemsPanelTemplate>
		        		 <UniformGrid Rows="1" IsItemsHost="True"/>	
		        </ItemsPanelTemplate>
			</StatusBar.ItemsPanel>
            <StatusBarItem HorizontalAlignment="Center">
                <TextBlock Text="Status A"/>
            </StatusBarItem>
            <Separator HorizontalAlignment="Center"/>
            <StatusBarItem HorizontalAlignment="Center">
                <TextBlock Text="Status B"/>
            </StatusBarItem>
            <Separator HorizontalAlignment="Center"/>
            <StatusBarItem HorizontalAlignment="Center">
                <TextBlock Text="Status C"/>
            </StatusBarItem>
        </StatusBar>

 
Regards,
Pete

---

#PEJL

Answer 6

Hi ashokapex,
 
I am marking your issue as "Answered", if you have new findings about your issue, please let me know.

Best regards,

---

Sheldon _Xiao[MSFT]
MSDN Community Support | Feedback to us
Microsoft
Please remember to mark the replies as answers if they help and unmark them if they provide no help.