I am attempting to put grid splitters in a statusbar. I have overridden the item panel template to place a grid in the status bar. I want to be able to slide the grid columns back and forth. Unfortunately I can't get the grid splitters to appear. I am using the xaml code below. Thanks for your time in advance.
<StatusBar>
<StatusBar.ItemsPanel>
<ItemsPanelTemplate>
<Grid IsItemsHost="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="10" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="10" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="10" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
</Grid>
</ItemsPanelTemplate>
</StatusBar.ItemsPanel>
<StatusBarItem Grid.Column="0">
<Label Content="blah" />
</StatusBarItem>
<StatusBarItem Grid.Column="1">
<GridSplitter Width="10" HorizontalAlignment="Stretch" />
</StatusBarItem>
<StatusBarItem Grid.Column="2">
<Label Content="blah1" />
</StatusBarItem>
<StatusBarItem Grid.Column="3">
<GridSplitter Width="10" HorizontalAlignment="Stretch" />
</StatusBarItem>
<StatusBarItem Grid.Column="4">
<Label Content="blah2" />
</StatusBarItem>
<StatusBarItem Grid.Column="5">
<GridSplitter Width="10" HorizontalAlignment="Stretch" />
</StatusBarItem>
<StatusBarItem Grid.Column="6">
<Label Content="blah3" />
</StatusBarItem>
</StatusBar>
Your GridSplitter is not a direct descendant of the Grid. It is wrapped in a StatusBarItem. Therefore this can't work in that configuration.
You could just use a Grid instead and style the background and borders to make it look like a StatusBar. The StatusBar is a relatively simple looking control, so it shouldn't be a too big of a deal to make something that looks like it.
Related
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25*" />
<ColumnDefinition Width="49*" />
<ColumnDefinition Width="25*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="1" Margin="30" VerticalAlignment="Center">
<StackPanel Orientation="Horizontal">
<TextBlock Margin="0,0,5,0" Text="Username:" />
<TextBox HorizontalAlignment="Stretch"/>
</StackPanel>
</StackPanel>
--Result image--
Im trying to make it so that the textbox will fill the rest of the space inside the current StackPanel.
however the "Stretch" propety doesn't seem to work - why is that?
Is there a different way do it or what am I doing wrong?
A StackPanel always tries to achieve the minimum possible height/width, depending on orientation; therefore, Stretch has no effect. You might want to use a DockPanel instead, which allows children to stretch:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25*" />
<ColumnDefinition Width="49*" />
<ColumnDefinition Width="25*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="1"
Margin="30"
VerticalAlignment="Center">
<DockPanel>
<TextBlock DockPanel.Dock="Left" Margin="0,0,5,0"
Text="Username:" />
<TextBox HorizontalAlignment="Stretch"/>
</DockPanel>
</StackPanel>
</Grid>
I want to have Image which in centered inside StatusBar and DockPanel which is align to right in StatusBar
<StatusBar VerticalAlignment="Bottom" Height="30">
<StatusBarItem HorizontalAlignment="Center" >
<Image />
</StatusBarItem>
<StatusBarItem HorizontalAlignment="Right">
<StackPanel Orientation="Horizontal">
<TextBlock />
<Controls:ProgressRing />
</StackPanel>
</StatusBarItem >
</StatusBar>
I have above code unfortunately it's not working , StackPanel is correctly alight to right but Image is alight to left...
The StatusBar uses a DockPanel to position the StatusBarItems which is not very convenient when you have several items.
To circumvent your issue, you can create your own layout in the ItemsPanelTemplate, for instance, a 3 columns Grid:
Place your image in the center of the middle column, and place your custom control on the right of the 3rd column.
<StatusBar VerticalAlignment="Bottom" Height="30">
<StatusBar.ItemsPanel>
<ItemsPanelTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
</Grid>
</ItemsPanelTemplate>
</StatusBar.ItemsPanel>
<StatusBarItem Grid.Column="1" HorizontalAlignment="Center">
<Image />
</StatusBarItem>
<StatusBarItem Grid.Column="2" HorizontalAlignment="Right">
<StackPanel Orientation="Horizontal">
<TextBlock />
<Controls:ProgressRing />
</StackPanel>
</StatusBarItem >
</StatusBar>
Is it possible to position a control in the XAML definiton relative to another control?
for example if I want to place a control exactly in the middle of another wider control.
and if so - how?
If you want to center the controls you could wrap them in a grid:
<Grid>
<TextBox Height="132" Width="229" VerticalAlignment="Center" HorizontalAlignment="Center" />
<Button Content="Button" Height="23" Width="75" VerticalAlignment="Center" HorizontalAlignment="Center" />
</Grid>
Other positioning can be accomplished by other panels like StackPanel etc. Grid beeing the most flexible choice.
Edit: updated with grid and columns for controlling position:
<Grid Height="50" Width="200">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*" />
<ColumnDefinition Width="20*" />
<ColumnDefinition Width="75*" />
</Grid.ColumnDefinitions>
<TextBox Grid.Column="0" Background="Red" />
<Button Content="Button" Grid.Column="2" />
</Grid>
I have the next layout
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Image Grid.Row="0" Grid.RowSpan="2" Grid.Column="0" Width="60" Height="60" />
<StackPanel Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2" Orientation="Horizontal">
<TextBlock Text="Title should be long" HorizontalAlignment="Left" />
<Ellipse Fill="White" Stroke="White" Width="7" Height="7" />
</StackPanel>
<TextBlock Grid.Row="1" Grid.Column="1" Text="Message" />
<TextBlock Grid.Row="1" Grid.Column="2" Text="Info" />
</Grid>
I have an issue in the StackPanel which hosts a Title and Ellipse, the goal is the Online marker by the ellipse whitch should be placed at the end off the title. But it shouldn't out of a view part.
I have tried to put TextBox and Ellipse into cells of the Grid unfortunatly it doesn't help.
<Grid Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2">
<Grid.ColumnsDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnsDefinitions>
<TextBlock Grid.Column="0" Text="Title should be long" HorizontalAlignment="Left" />
<Ellipse Grid.Column="1" Fill="White" Stroke="White" Width="7" Height="7" />
</Grid>
In my mind it should render correct, but the ellipse is out of view port again.
This is a Expression Blend layout scrinshots, the same layout is rendering in runtime.
The Grid bounds:
The TextBox bounds:
The Ellipse bounds:
So the TextBox and Ellipse is out of the grid :(
Update: I need the next behaviour of layout
1) Short title, the ellipse attached to the title end
2) Long title, the ellipse attached to the right side of container
I tried your code and it renders fine (in other terms it renders in the viewport. See red arrow). Please find attached a screenshot of the results. (I added the showgridlines just to illustrates the rows and cols)
//--- Changed testing and fixed code for intended effect ---//
Code changes in XAML: Swapped the width values for the columndefinitions. Added Textwrapping to textblock in order to see entire text. (You could opt for texttrimming instead depending on your aesthetics.)
<Grid Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="Title should be really really really really really long" HorizontalAlignment="Left" TextWrapping="Wrap" />
<Ellipse Grid.Column="1" Fill="White" Stroke="White" Width="7" Height="7"/>
</Grid>
Outcome:
I try to achieve a simple menubar in WPF.
Here is the XAML:
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<DockPanel>
<DockPanel Background="Black" VerticalAlignment="Top" LastChildFill="True" DockPanel.Dock="Top" Height="28">
<ToggleButton Content="--" Visibility="Collapsed" />
<StackPanel Orientation="Horizontal">
<Button Content="Add" />
<Button Content="Expand" />
</StackPanel>
<StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
<TextBox Text="Search" MinWidth="80" Width="200" />
<Button Content="X" Margin="0,1,50,0" />
</StackPanel>
</DockPanel>
</DockPanel>
</Page>
It looks good, but when I resize the page to a smaller width, the last child (the Stackpanel with the search textbox) is hiding behind the left items.
Like this:
http://s9.postimage.org/m0tkrobwd/printscreen.png
It would be good if the textbox would resize itself if it has enough space to achieve its MinWidth...Is it possible?
The tricky thing is to give a Control (in your case the SearchTextBox) an alignment but still catch the available space up to MaxWidth. Thanks to this answer.
<DockPanel>
<DockPanel Background="Black" DockPanel.Dock="Top" Height="28">
<ToggleButton DockPanel.Dock="Left" Content="--" Visibility="Collapsed" />
<StackPanel DockPanel.Dock="Left" Orientation="Horizontal">
<Button Content="Add" />
<Button Content="Expand" />
</StackPanel>
<Button DockPanel.Dock="Right" Content="X" />
<Border Name="Container">
<TextBox Text="Search" HorizontalAlignment="Right"
Width="{Binding ElementName=Container, Path=ActualWidth}" MaxWidth="200" />
</Border>
</DockPanel>
</DockPanel>
Container could be another Control too.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition MaxWidth="200" MinWidth="80"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ToggleButton Content="--" Visibility="Collapsed" />
<Button Content="Add" Grid.Column="1"/>
<Button Content="Expand" Grid.Column="2"/>
<TextBox Text="Search" Grid.Column="4"/>
<Button Content="X" Margin="0,1,50,0" Grid.Column="5" />
</Grid>
Instead of giving MaxWidth and MinWidth to TextBox give it to Grid Column.I hope this will help.
Hi Set MaxWidth and MinWidth for the TextBox Not Width. If you will set the Width then it has highest precedence and hence MinWidth won'nt come into act.I hope this will help.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ToggleButton Content="--" Visibility="Collapsed" />
<Button Content="Add" Grid.Column="1"/>
<Button Content="Expand" Grid.Column="2"/>
<TextBox Text="Search" MinWidth="80" MaxWidth="600" Grid.Column="3" ClipToBounds="True" />
<Button Content="X" Margin="0,1,50,0" Grid.Column="4"/>
</Grid>
Its just because of the size of page is not enough for showing both stackpanel on page. for this you can use the minimum size of the page. that will prevent the damages of the control hiding .
and its also up to you what design you want. you can either use grid rather then stackpanles.