In Silverlight, is it possible to let certain elements inside a ScrollViewer stay in view? By this I mean that certain elements should always be visible, regardless of where the scroll position currently is.
Take this XAML for example (you can put it in something like KaXaml of XamlPad):
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid>
<ScrollViewer Width="250" Height="100" HorizontalScrollBarVisibility="Visible">
<StackPanel>
<Grid Width="350" Height="50">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="50" />
<ColumnDefinition Width="50" />
<ColumnDefinition Width="50" />
<ColumnDefinition Width="50" />
<ColumnDefinition Width="50" />
<ColumnDefinition Width="50" />
</Grid.ColumnDefinitions>
<Button Content="1" Grid.Column="0" BorderThickness="2" Width="50" />
<Button Content="2" Grid.Column="1" BorderThickness="2" Width="50" />
<Button Content="3" Grid.Column="2" BorderThickness="2" Width="50" />
<Button Content="4" Grid.Column="3" BorderThickness="2" Width="50" />
<Button Content="5" Grid.Column="4" BorderThickness="2" Width="50" />
<Button Content="6" Grid.Column="5" BorderThickness="2" Width="50" />
<Button Content="X" Grid.Column="6" BorderThickness="2" Width="50" />
</Grid>
<Grid Width="350" Height="50">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="50" />
<ColumnDefinition Width="50" />
<ColumnDefinition Width="50" />
<ColumnDefinition Width="50" />
<ColumnDefinition Width="50" />
<ColumnDefinition Width="50" />
</Grid.ColumnDefinitions>
<Button Content="1" Grid.Column="0" BorderThickness="2" Width="50" />
<Button Content="2" Grid.Column="1" BorderThickness="2" Width="50" />
<Button Content="3" Grid.Column="2" BorderThickness="2" Width="50" />
<Button Content="4" Grid.Column="3" BorderThickness="2" Width="50" />
<Button Content="5" Grid.Column="4" BorderThickness="2" Width="50" />
<Button Content="6" Grid.Column="5" BorderThickness="2" Width="50" />
<Button Content="X" Grid.Column="6" BorderThickness="2" Width="50" />
</Grid>
</StackPanel>
</ScrollViewer>
</Grid>
</Page>
I would like to keep the 'X' buttons in sight, regardless of how much you scroll left or right. Of course, when scrolling down or up, the 'X' buttons should follow the scrolling.
I'm not saying the structure of my XAML is ideal, but each row is a databound to a different item, so each row is a data template. I can't put one big grid in the scrollviewer or have columns instead of rows as templates (at least, I think I can't).
Ya no sweat, just layer those elements over your Scrollviewer in a Panel like this;
<Grid>
<ScrollViewer>
... Scroll Viewer Embedded Stuff ...
</ScrollViewer>
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Center" VerticalAlignment="Top" Margin="5">
<Button Content="Button1"/>
<Button Content="Button1"/>
<Button Content="Button1"/>
<Button Content="Button1"/>
<Button Content="Button1"/>
</StackPanel>
</Grid>
You could even go a step further and set a EventTrigger to make your buttons visible on MouseEnter and disappear on MouseLeave if you wanted but this should get you started. Best of luck!
You might have more luck using a DataGrid and have the X buttons as a frozen column.
Related
This is my sample code ,Please help me to achieve both goals simultaneouslyImage
On click toggle button collapse and visible column and vertical split button.
In the below fig. First add toggle button and First column contain two column .
It contains second sub column is collapse or disable based on toggle button click.
and Spltter is working on outside two main column please help me as soon as possible
<Window.Resources>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
</Window.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="5"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40" />
<ColumnDefinition Width="300"/>
</Grid.ColumnDefinitions>
<Border Background="Green"
Grid.Column="0">
<Grid Grid.Column="1"
Visibility="{Binding IsChecked, ElementName=toggleButton, Converter={StaticResource BooleanToVisibilityConverter}}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="300" />
</Grid.ColumnDefinitions>
<WrapPanel Grid.Column="1"
Background="Aqua" />
</Grid>
</Border>
<ToggleButton x:Name="toggleButton"
Width="30"
Height="30"
Margin="0,10,10,0"
IsChecked="True"
HorizontalAlignment="Left"
VerticalAlignment="Top" />
</Grid>
<GridSplitter Width="5"
Grid.Column="1"
ResizeBehavior="CurrentAndNext" />
<Grid Grid.Column="2"></Grid>
</Grid>
From reading your question, I believe this is what you are trying to achieve. Please let me know if I didn't understand you properly.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="5" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Border
Grid.Column="0"
Background="Green">
<ToggleButton x:Name="toggleButton"
Width="30"
Height="30"
Margin="0,10,10,0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
IsChecked="True" />
</Border>
<Grid
Grid.Column="1"
MaxWidth="300"
Visibility="{Binding ElementName=toggleButton, Path=IsChecked, Converter={StaticResource BooleanToVisibilityConverter}}">
<WrapPanel Background="Aqua">
<TextBlock
Margin="8"
Text="Item 01" />
<TextBlock
Margin="8"
Text="Item 02" />
<TextBlock
Margin="8"
Text="Item 03" />
<TextBlock
Margin="8"
Text="Item 04" />
<TextBlock
Margin="8"
Text="Item 05" />
</WrapPanel>
</Grid>
<GridSplitter
Grid.Column="1"
Width="5"
Visibility="{Binding ElementName=toggleButton, Path=IsChecked, Converter={StaticResource BooleanToVisibilityConverter}}" />
<Grid Grid.Column="3">
<TextBlock
HorizontalAlignment="Center"
VerticalAlignment="Center"
Text="Column 2" />
</Grid>
</Grid>
The final column of the below grid view is not displaying in the center vertically, though the first image is and they use the same lookup method to find the image source (A resource dictionary object locator class I have). The final image (CurrencyImg) has the bottom of the image aligned with the middle of the row, so it stretches out of view upwards and doesn't fill the lower half of the row. Confused!
<Grid Name="grdCustomer" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300" />
<ColumnDefinition Width="220" />
<ColumnDefinition Width="50" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="30" />
<ColumnDefinition Width="30" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="18"/>
</Grid.RowDefinitions>
<Image Source="{y:ImageStaticResource {Binding IconString}}" Margin="0,0,0,0" VerticalAlignment="Center" ></Image>
<TextBlock Grid.Column="1" Text="{Binding CustomerDesc}" VerticalAlignment="Center" />
<TextBlock Name="tbTxnCount" Grid.Column="2" Text="{Binding TxnCount}" VerticalAlignment="Center" />
<TextBlock Name="tbAmount" Style="{StaticResource myCustStyleColor}" Grid.Column="3" Text="{Binding Amount}" HorizontalAlignment="Right" VerticalAlignment="Center" />
<TextBlock Name="tbCurrency" Grid.Column="4" Text="{Binding Currency}" HorizontalAlignment="Right" VerticalAlignment="Center" />
<Image Name="imgCurrency" Grid.Column="5" Margin="0,0,0,0" Source="{y:ImageStaticResource {Binding CurrencyImg}}" VerticalAlignment="Center" />
</Grid>
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.
I got 4 buttons aligned inside a grid. Is there any way to make alignment automatic so that if one button's visibility is set to false the remaining buttons uses the space wisely[other buttons moves to accommodate into new space]?
Instead of a grid, put the buttons in a StackPanel with Orientation="Horizontal". Also, make sure you set your button Visibility to "Collapsed" instead of "Hidden".
Try the following:
<Grid VerticalAlignment="Center" HorizontalAlignment="Center">
<StackPanel Orientation="Horizontal">
<Button Content="1" Width="50" Height="23" Visibility="Collapsed"/>
<Button Content="2" Width="50" Height="23"/>
<Button Content="3" Width="50" Height="23" Visibility="Collapsed"/>
<Button Content="4" Width="50" Height="23"/>
</StackPanel>
</Grid>
Or this:
<Grid VerticalAlignment="Center" HorizontalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Button Grid.Column="1" Content="1" Width="50" Height="23" Visibility="Collapsed"/>
<Button Grid.Column="2" Content="2" Width="50" Height="23"/>
<Button Grid.Column="3" Content="3" Width="50" Height="23" Visibility="Collapsed"/>
<Button Grid.Column="4" Content="4" Width="50" Height="23"/>
</Grid>
You should see the buttons centered but only show the second and fourth button
Depends on the layout and how complex you want the space distribution to be, if a uniform distribution is enough you could use a UniformGrid, in a normal Grid that would be a bit tricky as the columns and rows need to be adjusted.
i have added two buttons in stackpanel and set alignment as shown in the code
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<Button Content="Button" Height="64" Name="button1" Width="160" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<Button Content="Button" Height="64" Name="button2" Width="160" HorizontalAlignment="Right" VerticalAlignment="Top"/>
</StackPanel>
but this doesn't match with my requirement. I want it to be like shown in image below.
So how can i do this?
Something like this:
<Grid
Width="480">
<Grid.ColumnDefinitions>
<ColumnDefinition
Width="*" />
<ColumnDefinition
Width="*" />
</Grid.ColumnDefinitions>
<Button
Width="200"
Content="Clear" />
<Button
Grid.Column="1"
Width="200"
Content="Options"
HorizontalAlignment="Right"
/>
</Grid>
UPDATE: Due to popular demand, here is a grid without the fixed width or the columns.
<Grid>
<Button
Width="150"
Content="Clear"
HorizontalAlignment="Left"
/>
<Button
Width="150"
Content="Options"
HorizontalAlignment="Right"
/>
</Grid>