listboxitem with listbox recursive - wpf

I have a listboxitemtemplate that contains controls in a grid and a list box.
That listbox's listboxitemtemplate contains the same controls in the grid prior.
I am looking for a way to datatemplate the listboxitemtemplate so that datatemplate can be used as the contenttemplate in both of the two listboxes.
But I am running into dead end because the second listbox is located in the first listbox's listitemtemplate. Below is the code.
If any one has any ideas how so I can where I could come up with a scheme to datatemplate the first listbox's listboxitemtemplate minus the second listbox, and use the same datatemple in the second listbox.
<ListBox x:Name="lbLista"
ItemsSource="{Binding ListBoxCollection}"
>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<dxe:TextEdit Grid.Column="0"
Text="{Binding Section}"
TextWrapping="NoWrap" />
<dxe:ToggleSwitch
Grid.Column="1"
/>
<TextBlock TextTrimming="CharacterEllipsis"
Grid.Column="2"
Text ="{Binding SectionText}" />
<dxe:TextEdit Grid.Column="3"
Text ="{Binding SectionStatus}" />
<dx:DXExpander
Grid.Row="1"
Grid.Column="0">
<DockPanel HorizontalAlignment="Stretch" Background="Purple">
<dxre:RichEditControl DockPanel.Dock="Top" >
<dxre:RichEditControl.HorizontalRulerOptions>
<dxre:DXRichEditHorizontalRulerOptions Visibility="Hidden"/>
</dxre:RichEditControl.HorizontalRulerOptions>
<dxre:RichEditControl.VerticalRulerOptions>
<dxre:DXRichEditVerticalRulerOptions Visibility="Hidden"/>
</dxre:RichEditControl.VerticalRulerOptions>
</dxre:RichEditControl>
<ListBox x:Name="lbListb"
ItemsSource="{Binding ListBoxCollectionb}" >
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<dxe:TextEdit Grid.Column="0"
Text="{Binding Section}"
TextWrapping="NoWrap" />
<dxe:ToggleSwitch
Grid.Column="1" />
<TextBlock TextTrimming="CharacterEllipsis"
Grid.Column="2"
Text ="{Binding SectionText}" />
<dxe:TextEdit Grid.Column="3"
Text ="{Binding SectionStatus}" />
<dx:DXExpander
Grid.Row="1"
Grid.Column="0">
<DockPanel HorizontalAlignment="Stretch" >
<dxre:RichEditControl DockPanel.Dock="Top" >
<dxre:RichEditControl.HorizontalRulerOptions>
<dxre:DXRichEditHorizontalRulerOptions Visibility="Hidden"/>
</dxre:RichEditControl.HorizontalRulerOptions>
<dxre:RichEditControl.VerticalRulerOptions>
<dxre:DXRichEditVerticalRulerOptions Visibility="Hidden"/>
</dxre:RichEditControl.VerticalRulerOptions>
</dxre:RichEditControl>
</DockPanel>
</dx:DXExpander>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</DockPanel>
</dx:DXExpander>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

Related

Inner grid present in listview item is not stretching

In my List view I use a grid to arrange the controls of list view item
here is the code
<ListView.ItemTemplate>
<DataTemplate>
<Border>
<!--<Label Width="Auto" HorizontalAlignment="Stretch" Height="3" Background="LightGray"></Label>-->
<Grid HorizontalAlignment="Stretch" MinWidth="220" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="65*"/>
<ColumnDefinition Width="10" />
<ColumnDefinition Width="25*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" HorizontalAlignment="Left" FontWeight="Bold" Text="{Binding Path=Name}"/>
<TextBlock Grid.Row="0" Grid.Column="2" HorizontalAlignment="Right" Text="{Binding PlanDate.DateValue,StringFormat=d}"></TextBlock>
<TextBlock Grid.Row="1" Grid.Column="0" HorizontalAlignment="Left" Text="{Binding Owner}"></TextBlock>
<TextBlock Grid.Row="1" Grid.Column="2" HorizontalAlignment="Right" Text="{Binding ForecastDate.DateValue,StringFormat=d}"></TextBlock>
</Grid>
<!--<Label Width="Auto" HorizontalAlignment="Stretch" Height="3" Background="LightGray"></Label>-->
</Border>
</DataTemplate>
</ListView.ItemTemplate>
Here the text blocks in grid coloumn 2 horizontal alignment is set to right .. still the texblocks are not been placed at the right . Am i doing some mistake here? Please advise
Try adding HorizontalContentAlignment="Stretch" to your ListView (the default value is Left and that's why you see it's not stretched).
You can remove HorizontalAlignment="Stretch" MinWidth="220" in your inner Grid.

Odd WPF Grid Behavior Affected by TextBox Text

I can't figure out why the contents of my TextBox is affecting my grid column widths. I have setup a grid with 3 columns with widths defined as 50, *, 50, as shown below
Now, when in use, the center column will grow/shrink as the text in the TextBox changes, see the 2 examples below. The actual TextBox is not changing size, so I can't understand why in the world the grid is changing. The Grid is inside of a Border inside a UserControl. The UserControl is used as a DataTemplate in a ListBox.
Edit: I've discovered that this issue is related to the UserControl being in a ListBox, see example image below (UserControl in ListBox (circled in red) vs. UserControl Placed on Form (circed in blue). The grid behaves as expected when the UserControl is placed directly on the form. Code for the form is given below.
UserControl XAML:
<Grid ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Text="Name:" Margin="2" />
<TextBox Grid.Column="1" Margin="2" Text="{Binding Name, UpdateSourceTrigger=PropertyChanged}" Grid.ColumnSpan="2" />
<TextBlock Text="Shift:" Grid.Row="1" Margin="2" />
<TextBox Grid.Column="1" Grid.Row="1" Margin="2" Text="{Binding TimeShift, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, FallbackValue=0}" HorizontalContentAlignment="Right" />
<TextBlock Text="s" Grid.Row="1" Grid.Column="2" Margin="2" />
</Grid>
Window/Form XAML:
<Window x:Class="CrashSimOffice.FileImport"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:CrashSimOffice"
Title="File Import" Height="350" Width="450" Background="White" Icon="/CrashSimOffice;component/Images/16/page-white-save.png">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="75"/>
<ColumnDefinition Width="75"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="75"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Button Content="Add" Margin="2" Command="{Binding AddFileCommand}" />
<Button Content="Remove" Grid.Column="1" Margin="2" Command="{Binding RemoveFileCommand}" />
<ListBox HorizontalContentAlignment="Stretch" Grid.ColumnSpan="4" Margin="2" Grid.Row="1" ItemsSource="{Binding Files}" SelectedItem="{Binding CurrentFile}" ScrollViewer.CanContentScroll="False" Background="WhiteSmoke">
<ListBox.ItemTemplate>
<DataTemplate DataType="{x:Type local:FileViewModel}">
<local:FileView DataContext="{Binding}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Button Content="Done" Grid.Column="3" Margin="2" Grid.Row="2" Click="Button_Click" />
<local:FileView Grid.Row="3" Grid.ColumnSpan="4" />
</Grid>
OK, I figured it out, Bruno V you got me thinking it must have something to do with the ListBox. I needed to add this to my ListBox:
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
Not sure why that works, but it does.

How to use only 1 grid layout for both header and detail with itemscontrol?

Now, when i want to create a table with a header and detail i have to define a columns 2 times for each row. the first row is header and the second row i used itemscontrol to binding data.
below is my sample code.
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{StaticResource WidthColumn}" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="40" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding ListTitle}"/>
<TextBlock Grid.Column="1" Text="{Binding ListDetailTitle}" />
<TextBlock Grid.Column="2" Text="{Binding ListValueTitle}" />
</Grid>
<StackPanel Grid.Row="1">
<ItemsControl ItemsSource ="{Binding Samples}">
<ItemsControl.Resources>
<DataTemplate DataType="{x:Type parameters:SampleParameters}">
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{StaticResource WidthColumn}" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="40" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding Position}"/>
<TextBox Grid.Column="1" DataContext="{Binding Name}" Text="{Binding Value}"/>
<Button Grid.Column="2" Name="Button"/>
</Grid>
</DataTemplate>
</ItemsControl.Resources>
</ItemsControl>
</StackPanel>
</Grid>
Can it use only 1 time grid layout? or there is another solution to do with?

forcing scrollbars to appear in listbox

Hi can I force scrollbars to appear in listbox when its content do not fit. I really need it.
To create tabcontrol item I concucted this xaml:
<TabControl.ContentTemplate>
<DataTemplate>
<ScrollViewer VerticalScrollBarVisibility="Visible"
HorizontalScrollBarVisibility="Visible">
<Grid Name="RssFeedContainerGrid" >
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<controls:ucRssFeed Grid.Row="1" RssUri="{Binding FeedUri}" />
</Grid>
</ScrollViewer>
</DataTemplate>
</TabControl.ContentTemplate>
and ucRssFeed contains listbox.
Here some xaml from that control where I want scrolling to take place:
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="10" x:Name="RssFeedCellblock">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Orientation="Vertical" Margin="10" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="0">
<!-- Topic label-->
<TextBlock Cursor="Hand" FontWeight="Bold" Text="{Binding XPath=title}" Tag="{Binding XPath=link}" Foreground="{StaticResource RSS_Topic_Title}" MouseDown="TextBlock_MouseDown">
</TextBlock>
<!-- Breakline -->
<Line Stroke="{StaticResource RSS_Topic_Title}" Y1="5" Y2="5" X1="0" X2="{Binding ElementName=NewsListBox, Path=ActualWidth}" Opacity="0.7" StrokeThickness="1"/>
<!-- publication date label -->
<TextBlock Text="{Binding XPath=pubDate}" Opacity="0.5" />
<!-- Description textblock -->
<TextBlock FontSize="10" FontFamily="Times New Roman" x:Name="descriptionTextBlock"
Text="{Binding XPath=description, Converter={StaticResource HtmlToPlainTextConverter}}" Margin="10"
TextWrapping="Wrap" />
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
You need to set the Height property of your ListBox for the Scrollbar to appear listbox automatically show scrollbar when the content is more

Last Grid Column Not Auto Resizing With Grid

I'm having a problem with my TextBoxs not "Auto" resizing. I'm trying to create a form that behaves and looks like the Properties Editor in Visual Studio. What appears to be happening is that the third column is not expanding to fill all of the available remaining space in the grid. Image below is how my form looks on startup.
The width of the textboxs is determined by the MinWidth setting on the third ColumnDefinition statement. Also, the Width is set to "*". With any other setting, the resizing done with the GridSplitter doesn't work correctly.
<StackPanel Orientation="Vertical" VerticalAlignment="Top" x:Name="Stacker" Grid.IsSharedSizeScope="True">
<Expander x:Name="Expand" IsExpanded="True" Header="This is a test of a Second Panel" Width="{Binding Width, ElementName=Stacker}">
<Grid x:Name="EditGrid1" Margin="3" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="50" SharedSizeGroup="SharedSize1" />
<ColumnDefinition Width="Auto" SharedSizeGroup="SharedSize2" />
<ColumnDefinition Width="*" MinWidth="50" x:Name="ValueCol" />
</Grid.ColumnDefinitions>
<GridSplitter Grid.Column="1" x:Name="ToolBoxSplitter1" Grid.Row="1" Grid.RowSpan="6" Panel.ZIndex="1" HorizontalAlignment="Stretch" ResizeBehavior="PreviousAndNext" Width="3"/>
<TextBlock MaxHeight="40" Grid.Column="0" Grid.Row="1" Text="{x:Static lex:DoSomeThingView.Name}" />
<TextBlock MaxHeight="40" Grid.Column="0" Grid.Row="2" Text="{x:Static lex:DoSomeThingView.Address}" />
<TextBlock MaxHeight="40" Grid.Column="0" Grid.Row="3" Text="{x:Static lex:DoSomeThingView.Zip}" />
<TextBlock MaxHeight="40" Grid.Column="0" Grid.Row="4" Text="{x:Static lex:DoSomeThingView.NumberOfDoors}" TextTrimming="CharacterEllipsis" Grid.IsSharedSizeScope="True" />
<TextBlock MaxHeight="40" Grid.Column="0" Grid.Row="5" Text="{x:Static lex:DoSomeThingView.DoubleNumber}" />
<TextBox Grid.Column="2" Grid.Row="1" x:Name="UserName1" MaxHeight="50" TextWrapping="Wrap"
VerticalScrollBarVisibility="Auto" SpellCheck.IsEnabled="True" />
<TextBox Grid.Column="2" Grid.Row="2" x:Name="Address1" />
<TextBox Grid.Column="2" Grid.Row="3" x:Name="Zip1" />
<TextBox Grid.Column="2" Grid.Row="4" x:Name="NumberOfDoors1" />
<TextBox Grid.Column="2" Grid.Row="5" x:Name="DoubleNumber1" />
</Grid>
</Expander>
</StackPanel>
Any suggestions on how to correct this?
Have a check once again of any style being set globally because your layout worked perfectly fine with me.
try overriding your textbox style by a local resource
<StackPanel.Resources>
<Style TargetType="{x:Type TextBox}"/>
</StackPanel.Resources>

Resources