I wrote my custom control SearchTextBox. This control has the property PopupContent. PopupContent has a CheckBox and I want to bind it to the property IsChecked But the binding does not work. How can I do this correctly?
<UserControl x:Class="TestEnv2.PanelViews.SolutionView.SolutionViewContent">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition Height="2"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border Grid.Row="0" x:Name="SearchPanel" Visibility="Hidden" Background="#efeff2" >
<ctrl:SearchTextBox x:Name="SearchControl" Height="21" BorderThickness="0" VerticalContentAlignment="Center" Background="White"
SearchMode="Delayed" LabelText="Search Solution Explorer" Search="SolutionView_Search">
<ctrl:SearchTextBox.PopupContent>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Margin="5,0,0,0" Text="Search options" Foreground="Gray" VerticalAlignment="Center"/>
<CheckBox Grid.Row="1" Margin="5,0,0,5" Content="Match case"
IsChecked="{Binding Path=SearchMatchCase, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type panels_soln:SolutionViewContent}}}"/>
</Grid>
</ctrl:SearchTextBox.PopupContent>
</ctrl:SearchTextBox>
</Border>
</Grid>
</UserControl>
Code behind:
public partial class SolutionViewContent : UserControl
{
public static readonly DependencyProperty SearchMatchCaseProperty = DependencyProperty.
Register("SearchMatchCase", typeof(Boolean), typeof(SolutionViewContent), new UIPropertyMetadata(true));
public Boolean SearchMatchCase
{
get { return (Boolean)GetValue(SearchMatchCaseProperty); }
set
{
MessageBox.Show("SearchMatchCase");
SetValue(SearchMatchCaseProperty, value);
}
}
public SolutionViewContent()
{
InitializeComponent();
}
}
Problem resolved. Popup is like ContextMenu, ToolTip controls, They are not added to the VisualTree. Answer here.
As commenter Will says, you can do this by giving your SolutionViewContent object a name, and then referencing that name in your binding.
For example:
<UserControl x:Class="TestEnv2.PanelViews.SolutionView.SolutionViewContent"
<!-- any name here will do...you just have to make sure to
use the same name in the binding -->
x:Name="solutionViewContent1">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition Height="2"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border Grid.Row="0" x:Name="SearchPanel" Visibility="Hidden" Background="#efeff2" >
<ctrl:SearchTextBox x:Name="SearchControl" Height="21" BorderThickness="0" VerticalContentAlignment="Center" Background="White"
SearchMode="Delayed" LabelText="Search Solution Explorer" Search="SolutionView_Search">
<ctrl:SearchTextBox.PopupContent>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Margin="5,0,0,0" Text="Search options" Foreground="Gray" VerticalAlignment="Center"/>
<CheckBox Grid.Row="1" Margin="5,0,0,5" Content="Match case"
IsChecked="{Binding ElementName=solutionViewContent1, Path=SearchMatchCase}"/>
</Grid>
</ctrl:SearchTextBox.PopupContent>
</ctrl:SearchTextBox>
</Border>
</Grid>
</UserControl>
Related
Using WPF I'm trying to create a Grid which contains A list view then some controller with details and then a row with a singe button. Here's what I tried
<Grid DataContext="...">
<Grid.RowDefinitions>
<RowDefinition Height="177" MinHeight="177"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ListView Grid.Row="0" BorderBrush="LightGray" BorderThickness="1,1,1,0">
<ListView.View>
<GridView x:Name="SomeName"/>
</ListView.View>
</ListView>
<GridSplitter Grid.Row="1" Height="5" HorizontalAlignment="Stretch" ResizeDirection="Rows" BorderBrush="LightGray" BorderThickness="1,0,1,0"/>
<Border Grid.Row="2" Grid.RowSpan="1" BorderBrush="LightGray" BorderThickness="1,0,1,1" Height="Auto" Padding="1">
<ContentControl Grid.RowSpan="1" ContentTemplateSelector="{StaticResource someTemplateSelector}" Content="{Binding itemBinding, Mode=OneWay}" Height="Auto"/>
</Border>
<GridSplitter Grid.Row="3" Height="5" HorizontalAlignment="Stretch" ResizeDirection="Rows" BorderBrush="LightGray" BorderThickness="1,0,1,0"/>
<Button Grid.Row="4" Grid.RowSpan="1" DockPanel.Dock="Right" Margin="3,0,0,0" Command="{Binding Click}" Width="28" Height="28" Padding="0" VerticalAlignment="Bottom">
<Image Width="16" Height="16" Source="{StaticResource Heart}"/>
</Button>
</Grid>
The above XAML is functional but the border overlaps all rows below and including row 2, instead of going just up to the next GridSplitter.
And it looks roughly like this:
You have five rows but only three row definitions
Add the desired row definitions:
<Grid.RowDefinitions>
<RowDefinition Height="177" MinHeight="177"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
and the layout should be correct.
My project is based on WPF. I have created a canvas Container. Under that container, I have two grids (gSettings and gGrid).
I have used GroupBox. Under Canvas Container (gCanvas), I have created two grids (gSettings and gGrid). Under gGrid, I am using Tab Controls (tabCtrlDevice). First time when the Window is loading, it's showing data correctly in both grids, but when I am changing the tab item of tab controls, the second grid i.e. gGrid then, gSettings is disappears.
Please help to sort out this issue.
Thanks in advance.
<GroupBox x:Name="DragDropgrpbox" Height="Auto" Width="Auto">
<ZoomableCanvas x:Name="zoomCtrl">
<Canvas x:Name="gCanvas">
<Grid x:Name="gSettings" Canvas.Left="0" Height="613">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="15" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Border x:Name="wrapBrdr2" Grid.Column="1" Grid.ColumnSpan="2">
<WrapPanel VerticalAlignment="Center" HorizontalAlignment="Center">
<Image Name="ImageViewer2" Stretch="Fill" HorizontalAlignment="Center" Width="116" Height="107" Panel.ZIndex="1" VerticalAlignment="Center" />
</WrapPanel>
</Border>
</Grid>
<Grid x:Name="gGrid" Canvas.Left="140" Height="646">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="5"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="15"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="5"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5" />
<ColumnDefinition />
<ColumnDefinition x:Name="grdConverterColumn" MinWidth="140" Width="*"/>
<ColumnDefinition />
<ColumnDefinition x:Name="grdPortColumn" Width="*"/>
<ColumnDefinition />
<ColumnDefinition Width="5"/>
</Grid.ColumnDefinitions>
<Border x:Name="wrapBrdr" Grid.Column="1" Grid.Row="2" Grid.ColumnSpan="2">
<WrapPanel>
<Image Name="ImageViewer1" Stretch="Fill" HorizontalAlignment="Left" Width="54" Height="49" Panel.ZIndex="1" />
<TextBlock x:Name="lblMessage" Grid.Column="3" Grid.Row="2" Grid.ColumnSpan="4">
<TextBlock.Inlines>
<Run x:Name="step1" />
<LineBreak/>
<Run x:Name="step2" />
<LineBreak/>
<Run x:Name="step3" />
</TextBlock.Inlines>
</TextBlock>
</WrapPanel>
</Border><TabControl x:Name="tabCtrlDevice" Grid.Column="1" Grid.Row="5" Grid.ColumnSpan="2" Grid.RowSpan="2">
<TabItem x:Name="CoriolisMVD" >
<TabItem.Content>
<UniformGrid x:Name="grdDevices" Columns="3" VerticalAlignment="Top"/>
</TabItem.Content>
</TabItem>
<TabItem x:Name="DensityViscosity">
<TabItem.Content>
<UniformGrid x:Name="grdDensityViscosity" Columns="2" VerticalAlignment="Top"/>
</TabItem.Content>
</TabItem>
<TabItem x:Name="RosemountFlow" >
<TabItem.Content>
<UniformGrid x:Name="grdRosemountFlow" Columns="2" VerticalAlignment="Top"/>
</TabItem.Content>
</TabItem>
<TabItem x:Name="Other" >
<TabItem.Content>
<UniformGrid x:Name="grdOther" Columns="2" VerticalAlignment="Top"/>
</TabItem.Content>
</TabItem>
</TabControl>
<!--End Device Tab Controler-->
<Grid Grid.Column="3" Grid.Row="6">
<UniformGrid x:Name="grdConverters" Columns="1" VerticalAlignment="Top"/>
</Grid>
<Border x:Name="grdPortsBrdr" Height="500px" Grid.Column="4" Grid.Row="6" HorizontalAlignment="Right" >
<ScrollViewer>
<UniformGrid x:Name="grdPorts" VerticalAlignment="Top"/>
</ScrollViewer>
</Border>
</Grid>
</Canvas>
</ZoomableCanvas>
</GroupBox>
After a lot struggle, I got a solution:
gCanvas.Children.Add(gSettings);
I have resolved it`
there is a grid inside scrollviewer which is having a vertical scrollbar. But that scroll bar is not clear, there are 2 small horizontal lines at the bottom of scrollbar.
<ScrollViewer VerticalScrollBarVisibility="Auto" >
<Grid VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button Name="DetailsBackButton" Style="{StaticResource BackButtonStyle}" Click="AttachementDetailsBackButton_Click" Grid.Row="0" Visibility="Collapsed" />
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ListBox x:Name="DetailsListbox" BorderBrush="#d2d4d5" BorderThickness="1" FontFamily="Arial" FontSize="12px" ItemsSource="{Binding}" Grid.Row="0" Visibility="Collapsed" Width="{Binding RelativeSource={RelativeSource TemplatedParent},Path=ActualHeight}" Style="{DynamicResource ListBoxDefaultStyle}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid >
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Text="{Binding Title}" Grid.Row="0" Style="{DynamicResource AttachmentTitleText}" MouseLeftButtonDown="AttachmentTitle_MouseLeftButtonDown" >
</TextBlock>
<Border Style="{DynamicResource AreaButtonBorder}" Grid.Row="1"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ListBox>
<WebBrowser Name="WebBrowser" Style="{DynamicResource WebBrowserStyle}" Visibility="Visible" Grid.Row="1" Navigating="FullTextWebBrowser_Navigating" LoadCompleted="WebBrowser_LoadCompleted" />
</Grid>
</Grid>
</ScrollViewer>
And further, if I am scrolling it a bit, these 2 horizontal lines will go off. how this can be solved? or Is there any way to move the scroll bar little down by default inside scrollviewer?
Thanks.
I have the following Window
Now if I try to pull down the Gridsplitter I can only as far as the blue Grid fits in the visible Window. But when sliding down the splitter I want a scrollbar to appear and be able to pull it down to the botton until the blue Grid is not visible any more.
<Window.Content>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition />
<RowDefinition Height="25" />
</Grid.RowDefinitions>
<Menu Name="MainMenu" Grid.Row="0">
</Menu>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<DockPanel x:Name="Green" Grid.Column="0" Width="Auto" Height="Auto">
<views:MyView></views:MyView>
</DockPanel>
<GridSplitter Grid.Column="0" Width="6"></GridSplitter>
<Grid Grid.Column="1" >
<ScrollViewer VerticalScrollBarVisibility="Auto">
<Grid VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="7" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<views:ListView x:Name="Yellow" ></views:ListView>
</Grid>
<GridSplitter Grid.Row="1" Height="7" HorizontalAlignment="Stretch" />
<Grid Grid.Row="2" >
<ContentControl Content="{Binding LoadedControl}" x:Name="Blue" />
</Grid>
</Grid>
</ScrollViewer>
</Grid>
</Grid>
<StatusBar x:Name="StatusBar" Grid.Row="2">
</StatusBar>
</Grid>
</Window.Content>
What do I have to change here?
Move your ScrollViewer further down so it wraps the blue ContentControl in row 2, and ensure the ContentControl has a Height or MinHeight set.
ScrollViewers allow their child to take up as much space as they want, and only shows scrollbars if the child object gets larger than the ScrollViewer size.
Also as a side note, you can remove some of those extra Grid's in your layout to make it easier to read. Here's an example with a bunch of them removed, and the first one being replaced with a DockPanel :)
<DockPanel>
<Menu Name="MainMenu" DockPanel.Dock="Top" Height="25" />
<StatusBar x:Name="StatusBar" DockPanel.Dock="Bottom" Height="25"/>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="6" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<views:MyView x:Name="Green" Grid.Column="0" />
<GridSplitter Grid.Column="1" Width="6" />
<Grid Grid.Column="2" >
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="7" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<views:ListView x:Name="Yellow" Grid.Row="0" />
<GridSplitter Grid.Row="1" Height="7" HorizontalAlignment="Stretch" />
<ScrollViewer Grid.Row="2" VerticalScrollBarVisibility="Auto">
<ContentControl x:Name="Blue" MinHeight="400"/>
</ScrollViewer>
</Grid>
</Grid>
</DockPanel>
Hope you find a better solution XD as mine use a code behind
I used the DragDelta event of the control GridSplitter and enlarge the height of the grid so the ScrollBar can be activated
The xaml Code:
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<DockPanel x:Name="Green" Grid.Column="0" Width="Auto" Height="Auto" Background="#FF0CFA8F" >
<local:BusyUserControl Width="200" Height="200"/>
</DockPanel>
<GridSplitter ResizeDirection="Rows" Grid.Column="0" Width="6"></GridSplitter>
<ScrollViewer x:Name="MainScrollViewer" VerticalScrollBarVisibility="Auto" Grid.Column="1" >
<Grid x:Name="MainGrid">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="7" />
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid >
<views:ListView x:Name="Yellow" ></views:ListView>
</Grid>
<GridSplitter Grid.Row="1" Height="7" ResizeBehavior="PreviousAndNext" HorizontalAlignment="Stretch" DragDelta="GridSplitter_DragDelta" />
<Grid Grid.Row="2">
<ContentControl Content="{Binding LoadedControl}" x:Name="Blue" />
</Grid>
</Grid>
</ScrollViewer>
</Grid>
The code Behind:
private void GridSplitter_DragDelta(object sender, System.Windows.Controls.Primitives.DragDeltaEventArgs e)
{
if (e.VerticalChange > 1500 || e.VerticalChange > -15000) return;
if (e.VerticalChange > 0 || Visibility.Visible.Equals(MainScrollViewer.ComputedVerticalScrollBarVisibility))
{
this.MainGrid.Height = this.MainGrid.ActualHeight + e.VerticalChange;
}
e.Handled = true;
}
Note:
When the scrollbar is no more visible I stop shrinking the grid (keep the grid stretshed) that’s the meaning of the condition
Visibility.Visible.Equals(MainScrollViewer.ComputedVerticalScrollBarVisibility)
Hope this could help you and thx for the question :)
if you want to display a vertical scroll bar for each part in the splitted grid try the following code :
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<DockPanel x:Name="Green" Grid.Column="0" Width="Auto" Height="Auto" Background="#FF0CFA8F" >
<local:BusyUserControl Width="200" Height="200"/>
</DockPanel>
<GridSplitter Grid.Column="0" Width="6"></GridSplitter>
<Grid Grid.Column="1" >
<Grid VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="7" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ScrollViewer VerticalScrollBarVisibility="Auto" Grid.Row="0" >
<Grid >
<views:ListView x:Name="Yellow" ></views:ListView>
</Grid>
</ScrollViewer>
<GridSplitter Grid.Row="1" Height="7" HorizontalAlignment="Stretch" />
<ScrollViewer VerticalScrollBarVisibility="Auto" Grid.Row="2" >
<Grid Grid.Row="2" >
<ContentControl Content="{Binding LoadedControl}" x:Name="Blue" />
</Grid>
</ScrollViewer>
</Grid>
</Grid>
</Grid>
otherwise clarify your need
I'm new to WPF. I was able to found out how to do a resizable vertical expander from here: Combine expander and grid (resizable expander)
So I thought making a horizontal would be easy, I have tried different ways with no success.
Can it be done without complex code? To have a glidsplitter between 2 grid rows which one of them has an expander
The layout looks like this:
Left expander/gridsplitter works fine. But the expander/gridsplitter at the bottom does not. It works fine without a gridsplitter though.
My XAML:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="10" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<DockPanel Grid.Row="0">
<Expander ExpandDirection="Left" Header="">
<Expander.Content>
<Grid>
<!-- this works -->
</Grid>
</Expander.Content>
</Expander>
<TextBox AcceptsReturn="True" />
</DockPanel>
<GridSplitter Grid.Row="1" Height="10" HorizontalAlignment="Stretch" ResizeBehavior="PreviousAndCurrent" ResizeDirection="Rows"/>
<DockPanel Grid.Row="2">
<Expander ExpandDirection="Down" Header="Summary">
<Expander.Content>
<TextBox AcceptsReturn="True" />
</Expander.Content>
</Expander>
</DockPanel>
</Grid>
If you remove the middle row and the gridsplitter, it works fine but it's not resizable.
Any help is appreciated.
The 3rd rows height should also be proportional. Specify MinHeight for the first and bottom rows so that they don't completely shrink.
Edited XAML:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="6*" MinHeight="100"/>
<RowDefinition Height="10" />
<RowDefinition Height="*" MinHeight="50"/>
</Grid.RowDefinitions>
<DockPanel Grid.Row="0">
<Expander ExpandDirection="Left" Header="">
<Expander.Content>
<Grid>
<!-- this works -->
</Grid>
</Expander.Content>
</Expander>
<TextBox AcceptsReturn="True" />
</DockPanel>
<GridSplitter Grid.Row="1" Height="2" HorizontalAlignment="Stretch"/>
<DockPanel Grid.Row="2">
<Expander ExpandDirection="Down" Header="Summary">
<Expander.Content>
<TextBox AcceptsReturn="True" />
</Expander.Content>
</Expander>
</DockPanel>
</Grid>
The following works for me. The GridSplitter is shown when expanded and hidden when collapsed.
I use ellipses that fill the panes in the example, because that makes it easy to see how much space is taken by each panel.
Xaml
<Grid Background="Green">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto" Name="expanderRow"/>
</Grid.RowDefinitions>
<Ellipse Grid.Row="0" Fill="Black"></Ellipse>
<Expander Grid.Row="2" ExpandDirection="Up" IsExpanded="False" Background="Yellow"
Expanded="Expander_Expanded"
Collapsed="Expander_Collapsed">
<Ellipse Fill="Red"/>
</Expander>
<GridSplitter Grid.Row="1" Height="15" HorizontalAlignment="Stretch" Name="expander" Visibility="Collapsed"></GridSplitter>
</Grid>
Code behind
private GridLength expandedHeight = new GridLength(0.5, GridUnitType.Star);
public MainWindow()
{
InitializeComponent();
}
private void Expander_Expanded(object sender, RoutedEventArgs e)
{
expanderRow.Height = expandedHeight;
expander.Visibility = Visibility.Visible;
}
private void Expander_Collapsed(object sender, RoutedEventArgs e)
{
expandedHeight = expanderRow.Height;
expanderRow.Height = GridLength.Auto;
expander.Visibility = Visibility.Collapsed;
}