WPF Expander and Window resizing after collapse? - wpf

I am dealing with one problem regarding to main window resizing after the expander is collapsed and window was manually resized to bigger size by drag/drop before that. The expander is collapsed but the main window is not resized to "fit" the inner component size.
The components are placed to auto sized grid columns and main window is set to WidhtAndHeight size content.
Main window property set:
SizeToContent="WidthAndHeight"
I have done solution via code behind and event handlers (on collapse and expand events). But I think the WPF has better approach ...
Expander XAML implementation:
<Expander Name="expander" Grid.Column="2" Grid.Row="0" Grid.RowSpan="5" ExpandDirection="Right" ToolTip="Expand window for history details" Expanded="Expander_Expanded" Collapsed="Expander_Collapsed" SizeChanged="expander_SizeChanged" >
<Expander.Header>
<TextBlock RenderTransformOrigin="0.3,1.5">
<TextBlock.RenderTransform>
<TransformGroup>
<RotateTransform Angle="90" />
</TransformGroup>
</TextBlock.RenderTransform>
Show history
</TextBlock>
</Expander.Header>
<StackPanel>
<ListView ItemsSource="{Binding Path=HistoryList}" ScrollViewer.CanContentScroll="True" ScrollViewer.HorizontalScrollBarVisibility="Auto" MaxHeight="350" >
<ListView.View>
<GridView>
<GridViewColumn Header="Operation" DisplayMemberBinding="{Binding Operation}" />
<GridViewColumn Header="Result" DisplayMemberBinding="{Binding Result}" />
</GridView>
</ListView.View>
</ListView>
</StackPanel>
</Expander>
Does anyone have a clue how to intelligent solve this case?
Thanks for advise.

The SizeToContent property seems to lose its value as soon as you resize the Window manually, to fix this just subscribe to the OnSizeChanged event of your Window, and reset the SizeToContent property:
XAML:
<Window SizeToContent="WidthAndHeight" SizeChanged="MainWindow_OnSizeChanged">
Code-Behind:
private void MainWindow_OnSizeChanged(object sender, SizeChangedEventArgs e)
{
SizeToContent = SizeToContent.WidthAndHeight;
}

Related

How to get synchronize the two scrollbars in WPF

I'm learning WPF these days.
I made some XAML like below.
<TextBox x:Name="TxtHex" IsReadOnly="True" MinWidth="500"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
Grid.Column="1"
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Visible"
Style="{StaticResource Textbox}"/>
<ScrollViewer Grid.Column="2">
<TextBox x:Name="TxtAnsi" Margin="0,0,5,0" IsReadOnly="True"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
Style="{StaticResource Textbox}"/>
</ScrollViewer>
I made two TextBoxes with VerticlaScrollBar and ScrollViewer.
I want this two scrollbar to have the same value when one scollbar changed value.
I mean, I want to synchronize the two scroll bars.
So, I want to get value of scollbar and set value to scrollbar.
I've been searching about this, But I can't get any information.
Please give me some tips if someone has good idea.
Thank you.
First, set your XAML code(note: you can change the background)
<TextBox ScrollBar.Scroll="TxtHex_Scroll" AcceptsReturn="True" x:Name="TxtHex"
IsReadOnly="True" MinWidth="500"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Visible" Margin="22,231,271.6,10"
Background="#FFE2E2E2"
/>
<ScrollViewer ScrollBar.Scroll="Scroll_Scroll" x:Name="scroll"
Margin="22,47,271.6,194">
<TextBox x:Name="TxtAnsi" IsReadOnly="True" AcceptsReturn="True"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
Background="#FFF7EEEE"
/>
</ScrollViewer>
Then, go to code:
private void TxtHex_Scroll(object sender, System.Windows.Controls.Primitives.ScrollEventArgs e)
{
scroll.ScrollToVerticalOffset(TxtHex.VerticalOffset);
scroll.UpdateLayout();
}
private void Scroll_Scroll(object sender, System.Windows.Controls.Primitives.ScrollEventArgs e)
{
TxtHex.ScrollToVerticalOffset(scroll.VerticalOffset);
scroll.UpdateLayout();
}
Do not forget to add your text inside it. So, when you scroll a one, the other one will scroll in the same value. But both of them need enough text to scroll.

Selecting listbox item inside datatemplate

I have a listbox that uses a data template. The template is very simple and consists of an Image and a TextBlock. They are both bound to an XML document. The template is as follows:
<Window.Resources>
<XmlDataProvider x:Key="NinjaData" Source="\Data\Ninjas.xml" XPath="/Ninjas"/>
<DataTemplate x:Key="NinjaDataTemplate">
<StackPanel>
<StackPanel Orientation="Horizontal" Margin="0">
<Image Source="{Binding XPath=ImageFile}" Margin="5" Width="50"/>
<TextBlock Text="{Binding XPath=#Name}" Margin="5" FontFamily="OCR A Std" Foreground="#FF9114" FontSize="14" Name="NinjaName"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</Window.Resources>
The Listbox is as follows:
<ListBox Background="{x:Null}" BorderBrush="{x:Null}"
ItemsSource="{Binding Source={StaticResource NinjaData}, XPath=Ninja}"
ItemTemplate="{StaticResource NinjaDataTemplate}"
>
<ListBox.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Gray"></SolidColorBrush>
</ListBox.Resources>
<ListBox.Effect>
<DropShadowEffect ShadowDepth="1" Color="#FF282828"/>
</ListBox.Effect>
</ListBox>
I'm having trouble working out how to retrieve the content of the TextBlock inside the data template when I click on it in the listbox. I want to display it in a label somewhere else on the page, but I can't work out how to access that textblock.
Can anyone help and point me in the right direction? I feel like I'm going round in circles at the moment.
Thanks for any help.
As you have a ListBox you can use the selection, just name the ListBox and bind to the SelectedItem:
<ListBox Name="lb" ... />
<Label DataContext="{Binding SelectedItem, ElementName=lb}"
Content="{Binding XPath=#Name}"/>
This does not retrieve the Text of the TextBlock in the template but gets it from the same source as the template. (You could actually target the TextBlock in the Template itself but i would not recommend it)
Add a MouseLeftButtonUp event handler to your textblock inside your datatemplate like :
<TextBlock Text="{Binding XPath=#Name}" Margin="5" FontFamily="OCR A Std" Foreground="#FF9114" FontSize="14" Name="NinjaName" MouseLeftButtonUp="TextBlock_MouseLeftButtonUp"/>
Now your TextBlock_MouseLeftButtonUp should look like:
private void TextBlock_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
TextBlock txt = sender as TextBlock;
}
And now do whatever you like to do with txt

WPF: get the content of a GroupBox to fill available space

I'm facing an irritating problem with WPF GroupBox, hope someone can help me out. Basically the problem is this: I have a listview inside a GroupBox, but no matter what I do I can't seem to be able to make it fill the GroupBox.
Here is the basic code:
<GroupBox Grid.Row="2" Header="Field" Visibility="{Binding ElementName=radioUnbound, Path=IsChecked, Converter={StaticResource bool2vis}}" Margin="0" VerticalContentAlignment="Stretch">
<ListView ItemsSource="{Binding ElementName=nnf1, Path=UnboundFields}" x:Name="listUnbound" SelectionChanged="listSelectionChanged" VerticalAlignment="Stretch" >
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding name}" Margin="2"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</GroupBox>
I tried encasing the list inside Grids, StackPanels, DockPanel, etc... but no matter what I try I always invariably end up with this:
I tried your code in XamlPad it works as you would expect it. Make sure you don't have global styles that set your ListView or GroupBox appearance.
You can clear global styles by putting this in the resources section of the GroupBox's parent control:
<Style TargetType="GroupBox" />
<Style TargetType="ListView" />

Focus movement between list and other elements. WPF

In my window I have the listview and other elements. How I can achieve such behavior of focus: when I press downkey on last listitem focus moves from listview on another element, accordingly pressing upkey on first element moves focus away from list.
So focus on pressing up-downkeys can move from other elements to the list, pass throw the list and leave from the list.
Thanks in advance.
Set the KeyboardNavigation.DirectionalNavigation attached property to Continue. The default for ListBox is Contained.
<ListBox KeyboardNavigation.DirectionalNavigation="Continue"/>
I have different situations in my application. For all controls I have my styles, but in style for the tabcontrol I set property KeyboardNavigation.DirectionalNavigation="Continue".
1. Here should have possibility to be selected listviewitems and tabitems. And when focus on tabitem and I press (->) tabitem changes.
2. Here should have possibility to be selected listboxitems and buttons.
3. Here should have possibility to be selected TabItem and TextBlocks.
And I can use just arrows not tab. 1:
<TabControl Name="tabControl1">
<TabItem Header="PORT" Name="PORT">
<ListView x:Name="ATList"
ItemsSource="{Binding Path=., NotifyOnTargetUpdated=true}"
KeyboardNavigation.DirectionalNavigation="Continue"
KeyUp="ATList_KeyUp" TargetUpdated="ATList_TargetUpdated">
<ListView.View>
<GridView >
<GridViewColumn> ........
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
</TabItem>
.......
</TabControl>
2.
<Grid>
<ListBox ItemsSource="{Binding NotifyOnSourceUpdated=True, NotifyOnTargetUpdated=True}"
KeyboardNavigation.DirectionalNavigation="Continue"
ClipToBounds="true" TargetUpdated="List_TargetUpdated" SourceUpdated="List_SourceUpdated">
</ListBox>
<WrapPanel>
<Label .../>
<Label .../>
<Button x:Name="NewBtn"
IsEnabled="{Binding ElementName=UsedMemory, Path = Content, Converter={StaticResource RouteNewConverter}}"
Click="NewRouteBtn_Click"> New </Button>
<Button x:Name="DeleteBtn" Click="DeleteBtn_Click"> Delete </Button>
</WrapPanel>
</Grid>
3.
<TabControl Margin="2,5,2,1" Name="tabControl1" >
<TabItem Header="AV" Name="AV">
<Grid>
<StackPanel x:Name="inf">
<TextBlock />
...
<TextBlock />
</StackPanel>
</Grid>
</TabItem>
</TabControl>

Find an element in DataTemplate applied to TabItem

I got a problem trying to find an element declared in DataTemplate, that after was applied like a ContentTemplate to TabItem object.
I saw that there is already some solutions in regard of this problem, but no one of them actually works in my case, and I would like to understand why (obviously I make mistake in some place)
Here is a sample code:
<DataTemplate x:Key="TabItemDataTemplate">
<Grid HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" Name="templateGrid">
<Grid.RowDefinitions>
<RowDefinition Height="6.0*"> </RowDefinition>
<RowDefinition Height="6" ></RowDefinition>
<RowDefinition Height="6.0*" ></RowDefinition>
<RowDefinition Height="*" ></RowDefinition>
</Grid.RowDefinitions>
<ListView x:Name="repoView" Grid.Row="0"
VerticalAlignment="Stretch"
ItemsSource="{Binding Source={StaticResource DataProviderForListView}}">
<GridView>
<GridViewColumn Header="State"
DisplayMemberBinding="{Binding Path=RepositoryItemState}"/>
<GridViewColumn Header="Working Copy Rev num."
DisplayMemberBinding="{Binding Path=WCRevision}"/>
<GridViewColumn Header="Repository Rev num."
DisplayMemberBinding="{Binding Path=RepoRevision}"/>
<GridViewColumn Header="User"
DisplayMemberBinding="{Binding Path=Account}"/>
<GridViewColumn Header="Item"
DisplayMemberBinding="{Binding Path=ItemName}"/>
</GridView>
</ListView>
<GridSplitter x:Name="gridSplitter" Grid.Row="1"
ResizeDirection="Rows" Background="Gray"
Height="4" HorizontalAlignment="Stretch"
Style="{StaticResource gridSplitterStyle}"/>
<RichTextBox x:Name="rowView" Grid.Row="2"
BorderBrush="Bisque" VerticalAlignment="Stretch"
IsReadOnly="True" Background="YellowGreen"
FontFamily="Comic Sans Serif"/>
<ToggleButton x:Name="rbWorkingCopy"
Template="{StaticResource ToggleButtonControlTemplate}"
Grid.Row="3" Width="100" Height="22"
Content="{StaticResource WorkingCopyTitle}"
HorizontalAlignment="Left" VerticalAlignment="Bottom"
Command="repoManager:AppCommands.GetWorkingCopyInfoCommand" />
<ToggleButton x:Name="rbRepository"
Template="{StaticResource ToggleButtonControlTemplate}"
Grid.Row="3" Width="100" Height="22"
Content="{StaticResource RepositoryTitle}"
HorizontalAlignment="Left"
VerticalAlignment="Bottom" Margin="120,0,0,0"
Command="repoManager:AppCommands.GetRepoInfoCommand" />
<ProgressBar x:Name="checkRepositoryProgress" Grid.Row="3"
Width="220" Height="22" HorizontalAlignment="Right"
VerticalAlignment="Bottom" Margin="250,0,10,0"
IsIndeterminate="True"
IsEnabled="{Binding repoManager:ExecutingCommand}" />
</Grid>
</DataTemplate>
This code is porgrammatically applied to the given TabItem object in following way :
this.ContentTemplate = FindResource("TabItemDataTemplate") as DataTemplate;
After I need access to the ListView element declared in DataTemplate, so I execute the codes found around in internet, and also on this site. Here is a short example:
/* Getting the ContentPresenter of myListBoxItem*/
ContentPresenter myContentPresenter =
FindVisualChild<ContentPresenter>(this);
// this.GetVisualChild(0)
/* Finding textBlock from the DataTemplate that is set on that ContentPresenter*/
DataTemplate myDataTemplate = myContentPresenter.ContentTemplate;
ListView repoListView = (ListView)myDataTemplate.FindName("repoView",
myContentPresenter);
Problem1: In this case ContentTemplate of ContentPresenter is Null, so code execution crashes.
Prolem2: Ok, I think, may be I need to navigate throw TabItem content directly, so the code becomes, more or less:
/* Getting the ContentPresenter of myListBoxItem*/
ContentPresenter myContentPresenter =
FindVisualChild<ContentPresenter>(this);
// this.GetVisualChild(0)
/* Finding textBlock from the DataTemplate that is set on that ContentPresenter*/
DataTemplate myDataTemplate = this.ContentTemplate;
ListView repoListView = (ListView)myDataTemplate.FindName("repoView",
myContentPresenter);
this is TabItem object. But the strage things, that the ContentTemplate of this is completely different from that one assigned above. I'm sure that I missed something somewhere, can you help me to figure out the problem ?
Thank you.
You don't want to use any of the template properties of the TabItem, since those are used to create the actual controls, rather than storing them. You should be able to search the visual tree for the ListView directly, rather than going through the DataTemplate.
Ok, here we come :)
I resolve the problem, in not very nice way, but it seems that works correctly.
As I mentioned above I used LoadContent method and it returns me the ListView object, but by the way it wasn't the ListView that UI actually uses. So to resolve that problem I add static property to hold my REAL ListView object (static as I have single DataTemplate that contains ListView shared across multiple TabItems, so the ListView shared too) and add event handler to my DataTemplate -> Loaded. Catching this event, that in my case raises only ones in lifetime of application, in RoutedEvent's OriginalSource I got the REAL ListView object that WPF engine uses for rendering on UI.
Hope my solution will help someone.
Thank you all.
Simply, if you have a DataGrid, and a TemplateColumn which contains a data template, you can use the following code sample:
<DataGridTemplateColumn x:Name="photoPathColumn" Header="{x:Static resx:FrmResource.Photo}" Width="Auto">
<DataGridTemplateColumn.CellEditingTemplate x:Uid="keyelm">
<DataTemplate x:Name="dodo">
<StackPanel Orientation="Horizontal" Height="Auto">
<TextBlock x:Name="photo" x:Uid="imageFile" Text="{Binding Path=PhotoPath}"></TextBlock>
<Button x:Name="Browse" Content="..." Click="Browse_Click"></Button>
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellEditingTemplate>
TextBlock tBlock = (TextBlok)photoPathColumn.CellEditingTemplate.FindName(
"photo",
photoPathColumn.GetCellContent(CustomersDataGrid.CurrentItem));
Where photo is the name of text block
Where photoPathColumn is the DataGrid's TemplateColumn.

Resources