As shown in the below image I have few input fields and a DataGrid in a WPF Window.
All controls are placed inside a ScrollViewer.
Example Code:
<Window>
<ScrollViewer>
<StackPanel>
<Grid>
<Label/>
<TextBox/>
<Label/>
<TextBox/>
<Label/>
<TextBox/>
</Grid>
<DataGrid/>
</StackPanel>
</ScrollViewer>
</Window>
Requirement
1) The Datagrid should occupy all the available space in window.
2) I Want to show the ScrollViewer only if there is no room enough to accommodate Input fields.
3) I want to show the DataGrid ScrollViewer only if there is enough space to accommodate all the input filed in window but no enough space to accommodate all the columns/rows in DataGrid.
4) I want to show both ScrollViewers if there is no enough space to accommodate input fields and thecolumns/rows in datagrid.
I have tried many possible ways, But i was unable to enable ScrollViewer in DataGrid. Could any one please help me to overcome this issue.
Providing sample XAML code will be highly appreciated!.
Instead of directly adding datagrid to your main grid.Enclose your Datagrid with scrollviewer and a grid.Give that grid the size of your datagrid.
Example:-
<Window>
<ScrollViewer>
<StackPanel>
<Grid>
<Label/>
<TextBox/>
<Label/>
<TextBox/>
<Label/>
<TextBox/>
</Grid>
<Grid>
<ScrollViewer>
<DataGrid/>
</ScrollViewer>
</Grid>
</StackPanel>
</ScrollViewer>
Related
I was working with WinForms and I am kind of new in WPF, I want to insert a vertical scrollbar to see all the elements content in my TabItems, this is my previous WinForm and this is my new WPF: I have implemented the following xaml-code:
<StackPanel Grid.Row="0" Grid.Column="0"
Orientation="Horizontal" Margin="0,0,0,199.2">
<TabControl x:Name="tabControl">
<TabItem Header="1" Background="#008000"/>
<TabItem Header="2" Background="#1e90ff"/>
<TabItem Header="3" Background="#bd3f02"/>
<ScrollBar></ScrollBar>
</TabControl>
</StackPanel>
Depending on what you want to display inside of your tabs, your issue might be solved by using a suitable items control which comes with a ScrollViewer out-of-the-box. Since I do not know your exact use case, I present you a general solution. From the images that you provided you want your tab content to be scrollable. To achieve this, remove the ScrollBar and place a ScrollViewer into each of the tabs that you want to scroll.
<StackPanel Grid.Row="0" Grid.Column="0" Orientation="Horizontal" Margin="0,0,0,199.2">
<TabControl x:Name="tabControl">
<TabItem Header="1" Background="#008000">
<ScrollViewer>
<!-- Your tab content here -->
</ScrollViewer>
</TabItem>
<TabItem Header="2" Background="#1e90ff"/>
<TabItem Header="3" Background="#bd3f02"/>
</TabControl>
</StackPanel>
The vertical scrollbar will be shown if the content exceed its container by default. If you want to display it always, set the VerticalScrollBarVisibility property to Visible.
<ScrollViewer VerticalScrollBarVisibility="Visible">
What you might want to try is encapsulating the content in a ScrollViewer like so :
<StackPanel>
<ScrollViewer>
<Grid>
<!-- YOUR CONTENT HERE -->
</Grid>
</ScrollViewer>
</StackPanel>
This should be easy: how can I stretch StackPanel inside the DockPanel, so that it would fill the whole parent's content and also maintain it's HorizontalAlignment?
Example:
<DockPanel LastChildFill="True">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Background="Yellow">
<Button Height="30">Button1</Button>
<Button Height="30">Button2</Button>
</StackPanel>
</DockPanel>
In this example the StackPanel's width is the same as the combined width from both buttons (and the background here is yellow), but the remaining space in DockPanel stays white. Looks like the LastChildFille property isn't working in my example.
I think by setting HorizontalAligment to Center on the StackPanel you are overriding the behavior of the DockPanel to fill the whole space with the StackPanel.
When i understand your question right, you want that the full space is yellow and the stackpanel with buttons is centered in the middle. Then you should wrap the StackPanel inside a Grid.
<DockPanel LastChildFill="True">
<Grid Background="Yellow">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<Button Height="30">Button1</Button>
<Button Height="30">Button2</Button>
</StackPanel>
</Grid>
</DockPanel>
I was trying to implement a ScrollViewer like so;
<Height="auto" Width="auto"
MaxHeight="500" MaxWidth="400"
ResizeMode="NoResize" WindowStyle="None">
<Grid>
<StackPanel>
<ScrollViewer Name="scrlBr">
<StackPanel Orientation="Vertical">
<TextBlock Name ="txtBlock" Margin="10" Height="auto"
Width="auto" TextWrapping="Wrap"></TextBlock>
<Button Name="btnOk" Click="btnOk_Click" Width="80"
HorizontalAlignment="Center">Close!</Button>
</StackPanel>
</ScrollViewer>
<Label HorizontalAlignment="Center" FontSize="3"
Name="lblScrollDown">\/</Label>
</StackPanel>
</Grid>
</Window>
The problem I'm having is that the scroll bar appears disabled, while the text obviously goes down off the window and I can't see the btnOk. Surely if the window has a fixed height and the TextBlock and Button, which are contained in the Scrollviewer, are bigger than the window then the ScrollBar should be enabled, no?
UPDATE
I worked out that the problem lies in having the ScrollViewer within a StackPanel. Might try it with a Grid instead... Update to come.
SOLUTION
I was right about the Stackpanel being the problem and went with Heinzi's suggestion of using the DockPanel and all's workin' fine. :) Thanks!
The problem is your StackPanel. It always takes all the vertical space it needs, so the container of the ScrollPanel is much larger than the window itself, and the ScrollViewer sees no need to scroll.
Solution: Replace the StackPanel with a DockPanel. Move the <Label> declaration to the top and dock it to the bottom of the DockPanel. The last child in a DockPanel (which is the ScrollViewer in this case) always fills the remaining space:
<Grid>
<DockPanel>
<Label DockPanel.Dock="Bottom" ... Name="lblScrollDown">\/</Label>
<ScrollViewer Name="scrlBr">
...
</ScrollViewer>
</DockPanel>
</Grid>
Try setting the CanContentScroll property on True from the ScrollViewer and set a fixed height of the StackPanel, as a StackPanel is designed to grow indefinitely in one direction. Or better, use a different panel to stack your items in.
Maybe you need write something like this
<ScrollViewer Name="scrlBr" VerticalScrollBarVisibility="auto" HorizontalScrollBarVisibility="auto">
...
</ScrollViewer>
I have ItemControl
It displays one panel for each record inside ObservableCollection.
My Problem is….
When size of ObservableCollection increase window can’t accommodate more panels so it displays only first six panels.
So criteria, One panel for each record inside ObservableCollection,couldn't be accomplish.
So, I need to have scroll bar so I can access each panel.
How does it can be implement?
See one screen shot below and Code of It Here
Thanks......
You need to host your panel within a ScrollViewer. This allows it to grow beyond the space available to it, whilst the ScrollViewer adds a Scrollbar.
You can do this by modiyfing the ItemsControl template:
<ItemsControl>
<ItemsControl.Template>
<ControlTemplate>
<ScrollViewer>
<ItemsPresenter/>
</ScrollViewer>
</ControlTemplate>
</ItemsControl.Template>
</ItemsControl>
Put any controls you want to have scrollbars into the ScrollViewer. Example taken from MSDN:
<ScrollViewer HorizontalScrollBarVisibility="Auto">
<StackPanel VerticalAlignment="Top" HorizontalAlignment="Left">
<TextBlock TextWrapping="Wrap" Margin="0,0,0,20">Scrolling is enabled when it is necessary.
Resize the window, making it larger and smaller.</TextBlock>
<Rectangle Fill="Red" Width="500" Height="500"></Rectangle>
</StackPanel>
</ScrollViewer>
This question already has answers here:
WPF: template or UserControl with 2 (or more!) ContentPresenters to present content in 'slots'
(3 answers)
Closed 3 years ago.
I have a custom ControlTemplate for a WPF TabControl that adds Buttons to the left and right hand side of the TabItem header. At the moment this is not a named part as the button commands are bound in the ControlTemplates XAML and do not need to be exposed outside of the ControlTemplate.
This works fine for a button but what if I want to add content to the left (or right) hand side of the TabItemHeaders which can be bound outside of the ControlTemplate so that my TabControl becomes more flexible?
My idea was to subclass the TabControl and have two named parts in the ControlTemplate and expose these as properties of the new control; CustomTabControl.LeftContentArea and CustomTabControl.RightContentArea respectively. Each named part is a ContentPresenter and each ContentPresenters Content property is exposed by the properties named above.
However, when I tried this I was unable to put content into the left and right content areas.
Edit: Just to be clear I have included an image. The red rectangles show where I want to be able to place extra content.
Update: Below is a screen shot of the progress I have made so far, hopefully this will help explain my problem a bit more.
The screen shot shows my custom Tab Control with two blank tabs and three buttons that are currently on the right hand side of the TabItem header area. The buttons are currently defined in the TabControls custom ControlTemplate I.E. there is a ColumnDefinition within the ControlTemplates Grid which contains a StackPanel that hosts 3 buttons.
What I am looking for is a way to allow the consumer of the tab control decide what content goes in the area next to the tabs. E.G. the user should be able to do something like this:
<local:CustomTabControl>
<local:CustomTabControl.RightContentArea>
<!-- This can be changed to ANY content that the user wants -->
<StackPanel Orientation="Horizontal">
<Button Content="Test" />
<Button Content="Test" />
<Button Content="Test" />
</StackPanel>
</local:CustomTabControl.RightContentArea>
<!-- TabItems are added as normal -->
<TabItem Header="Tab One" />
<TabItem Header="Tab Two" />
</local:CustomTabControl>
I tried a different (lazy) way, which was to create another grid that occupies the same space as the TabControl, ie both are in Grid.Row=0. I have bound the grid height to the height of the first tab so if the tabs change height the other controls will remain centered. I set MinWidth on the window so the controls dont overlap the tabs.
Paste this code into a new WPF Window...
<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="MainWindow" Height="306" Width="490" MinWidth="300">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TabControl Grid.Row="0" x:Name="tabControl">
<TabItem x:Name="tabItem" Header="TabItem" Height="50">
<Grid Background="#FFE5E5E5"/>
</TabItem>
<TabItem Header="TabItem">
<Grid Background="#FFE5E5E5"/>
</TabItem>
</TabControl>
<Grid Grid.Row="0" Height="{Binding ActualHeight, ElementName=tabItem}"
VerticalAlignment="Top" Margin="0,2,0,0">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right"
VerticalAlignment="Center" Margin="20,0">
<TextBlock VerticalAlignment="Center" Margin="10,0" FontSize="16"
Foreground="Red" FontFamily="Calibri">My Text</TextBlock>
<Button Content="My Button" />
</StackPanel>
</Grid>
</Grid>
</Window>
...and you will get this:
Depending on how much flexibility you need there are some methods that are suited better than others, i myself try to use DynamicResources if possible because it is normally less troublesome than creating new user-controls.
Here's an example of how to add additional content to the left of the Tab-Header:
<TabControl>
<TabControl.Resources>
<DataTemplate x:Key="AugmentedTabItem">
<StackPanel Orientation="Horizontal">
<ContentPresenter Content="{DynamicResource ContentLeft}" Margin="0,0,5,0"/>
<ContentPresenter Content="{Binding}"/>
</StackPanel>
</DataTemplate>
</TabControl.Resources>
<TabItem Header="ÜberTab" HeaderTemplate="{StaticResource AugmentedTabItem}">
<TabItem.Resources>
<TextBlock x:Key="ContentLeft" Text=">>>" Foreground="Blue"/>
</TabItem.Resources>
</TabItem>
</TabControl>
Hope that helps, if something is unclear or if this doesn't suffice, drop a comment.