I have just started c# and Wpf. I am trying to build a utility that gets computers from active directory, display them in a treeview and then recover information via WMI. I have managed to get most of this done without asking questions. However I now have a problem with presentation.Current Wpf output
after selecting the information required (disks/printers/services etc) i would like to display the information in the panel to the right. My problem is this infomation may be a tabbed form, a listbox, a gridview or a graphic.ex A tab view What would be my best way to get this result. Thanks in advance.
It's the area currently taken up by " " that should show the different formats.
<StackPanel>
<DockPanel Margin="3">
<Border CornerRadius="6"
BorderBrush="Gray"
Background="LightGray"
BorderThickness="2" >
<StackPanel Background="SkyBlue" Height="80">
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<Label Content="Domaine:" HorizontalAlignment="Left" Height="30"/>
<TextBox Name="FrmDomain" HorizontalAlignment="Left" Height="30" Width="80"/>
<Label Content="Zone" Height="30"/>
<TextBox Name="FrmTreeZone" HorizontalAlignment="Left" Height="30" Width="80"/>
<Label Content="Ordinateur:" />
<TextBox Name="FrmTreeOrdi" HorizontalAlignment="Left" Height="30" Width="80"/>
<Label Content="Option:" />
<TextBox Name="FrmTreeOption" HorizontalAlignment="Left" Height="30" Width="80" />
<Label Content="Disponible:" />
<TextBlock Name="FrmTreeAlive" HorizontalAlignment="Left" Height="30" Width="40"/>
</StackPanel>
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<Label Content="Recherche:"/>
<TextBox x:Name="FrmRecherche" HorizontalAlignment="Left" Height="30" Width="80"/>
<Button x:Name="btnRech" Click="btnRech_MouseClick" >
<materialDesign:PackIcon Kind="Search"/>
</Button>
<Label Content="Mac:" />
<TextBox x:Name="FrmMac" HorizontalAlignment="Left" Height="30" Width="80"/>
</StackPanel>
</StackPanel>
</Border>
</DockPanel>
<DockPanel Margin="3">
<Border CornerRadius="6"
BorderBrush="Gray"
Background="LightGray"
BorderThickness="2" >
<StackPanel Orientation="Vertical" HorizontalAlignment="Left" Background="LightCyan" MinWidth="300" Width="300">
<TreeView Name="FrmTreeView" Height="540" Margin="8"
SelectedItemChanged="TreeView_SelectedItemChanged"
PreviewMouseRightButtonDown="OnPreviewMouseRightButtonDown"
TreeViewItem.Selected="NodeSelected">
<TreeView.Resources>
<ContextMenu x:Key="TestMenu">
</ContextMenu>
<Style TargetType="TreeViewItem" >
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Width="20" Margin="3" Source="{Binding RelativeSource={RelativeSource Mode=FindAncestor,
AncestorType={x:Type TreeViewItem}},
Path=Tag,
Converter={x:Static local:HeaderToImageConverter.Instance }}"/>
<TextBlock VerticalAlignment="Center" Text="{Binding}"/>
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</TreeView.Resources>
</TreeView>
</StackPanel>
</Border>
<StackPanel Name="test" DockPanel.Dock="Right" Visibility="Visible">
<Border CornerRadius="6"
BorderBrush="Gray"
Background="WhiteSmoke"
BorderThickness="2" >
<TextBlock Name="FrmActionAffiche" Height="540" Margin="8"/>
</Border>
<DataGrid Height="1" Name="FrmDataGrid"/>
</StackPanel>
</DockPanel>
<StackPanel Orientation="Horizontal">
<Button Name="btnDisque" Content="Disque" Height="30" Width="100" Click="btnDisque_MouseClick" />
</StackPanel>
<StackPanel Orientation="Vertical" Height="30">
<StatusBar>
<StatusBar.ItemsPanel>
<ItemsPanelTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
</Grid>
</ItemsPanelTemplate>
</StatusBar.ItemsPanel>
<StatusBarItem>
<TextBlock>Ready</TextBlock>
</StatusBarItem>
<StatusBarItem Grid.Column="1">
<ProgressBar Value="30" Width="80" Height="18"/>
</StatusBarItem>
<StatusBarItem Grid.Column="2">
<TextBlock>Set</TextBlock>
</StatusBarItem>
<StatusBarItem Grid.Column="3">
<TextBlock>Go!</TextBlock>
</StatusBarItem>
</StatusBar>
</StackPanel>
</StackPanel>
To be able to display different types of information in different ways you should make use of a DataTemplate, you can have multiple DataTemplates and select which one to display based on the type without any additional coding (or program your own logic for selecting the template with a DataTemplateSelector).
For example assuming the TreeView on the left contains items of type Computer and Printer you could bind a control to the SelectedItem property of the TreeView (do display the currently selected item) and add DataTemplates for Type=Printer and Type=Computer to that control to describe how you want to display either of them.
If you post your current code (XAML and C#) i'd be happy to give you an exemple for your specific case.
Related
Here is my code:
<ListView Grid.Row="1" x:Name="viewTicket" Style="{StaticResource ticketListBox}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" Background="Transparent" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Center" BorderBrush="{x:Null}" SelectionChanged="ViewTicket_SelectionChanged">
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="4*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<Image Visibility="{Binding selectedCheck}" Name="check" Grid.Column="0" Margin="10,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Center" Source="../../Images/check-donatota.png" Stretch="None" MouseLeftButtonUp="Check_MouseLeftButtonUp"/>
<TextBlock Visibility="{Binding selectedQuantity}" Name="quantity" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap" Text="{Binding amount}"/>
<TextBlock Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Center" Foreground="Black" TextWrapping="Wrap" Text="{Binding name}"/>
<TextBlock Visibility="{Binding selectedPrice}" Name="price" Grid.Column="2" HorizontalAlignment="Right" VerticalAlignment="Center" TextWrapping="Wrap" Text="{Binding total, StringFormat=C}"/>
<Image Visibility="{Binding selectedTrash}" Name="trash" Grid.Column="2" Margin="0,0,15,0" HorizontalAlignment="Right" VerticalAlignment="Center" Source="../../Images/trash-donatota.png" Stretch="None" MouseLeftButtonUp="Trash_MouseLeftButtonUp"/>
</Grid>
<ListView
ItemsSource="{Binding ingredients}"
Grid.Row="1"
Margin="-5,0,0,0"
Name="viewTicketIngs"
IsHitTestVisible="False"
Style="{StaticResource ticketListBox}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ScrollViewer.VerticalScrollBarVisibility="Hidden"
Background="Transparent"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Center"
BorderBrush="{x:Null}"
SelectionChanged="ViewTicketIngs_SelectionChanged">
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="4*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<TextBlock Visibility="Visible" Name="quantity" Grid.Column="0" Foreground="{DynamicResource GrayTextDonaTotaBrush}" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap" Text="{Binding amount}"/>
<TextBlock Margin="10,0,0,0" Grid.Column="1" Foreground="{DynamicResource GrayTextDonaTotaBrush}" HorizontalAlignment="Left" VerticalAlignment="Center" TextWrapping="Wrap" Text="{Binding ing.name}"/>
<TextBlock Visibility="Visible" Name="price" Grid.Column="2" Foreground="{DynamicResource GrayTextDonaTotaBrush}" HorizontalAlignment="Right" VerticalAlignment="Center" TextWrapping="Wrap" Text="{Binding total, StringFormat=C}"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I add data to the ListView viewTicket, but depending of a property I would like to change the ItemSource Binding of the ListView viewTicketIngs. In other words, is there anyway that I can use an if expression on the binding? Something like ItemsSource="{Binding IF(mode == 0) {ingredients} else {plates}}"
Change the Binding by a DataTrigger in a Style:
<ListView ...>
<ListView.Style>
<Style TargetType="ListView">
<Setter Property="ItemsSource" Value="{Binding plates}"/>
<Style.Triggers>
<DataTrigger Binding="{Binding mode}" Value="0">
<Setter Property="ItemsSource" Value="{Binding ingredients}"/>
</DataTrigger>
</Style.Triggers>
</Style>
</ListView.Style>
</ListView>
As I understand it, you sometimes dispaly plates, sometimes ingredients. Now there are triggers conditional display. WPF actually has a pretty wide support.
However what might be better is to have 2 different ViewModel classes and two (how I call them) "type targetting data tempaltes". Say you have these clases:
abstract class ViewModelItem { }
class Plate : ViewModelItem { }
class IngredientsList : ViewModelItem { }
The propety you exposie this in, would be set to ViewModelItem. In realtiy you would assign either a Plate or IngredientsList Instance.
Now you define two DataTemplates. A interesting thing about WPF is that if you do not specify a explicit Template, the Code will go out of it's way to try to find one. And it will do the matching via the DataType property of the Template (TargetType for Styles and similar). It works similar to what CSS does, with somebodies code going out of it's way to find a template to apply.
I have a ListBox that needs to show more than one item per row if there's room for it. I've tried to use WrapPanel as common solution but it's moving all items to the first row. This is the XAML I'm using.
<Border CornerRadius="0.5" Background="#FEFEFE" BorderThickness="0" Margin="20">
<Border.Effect>
<DropShadowEffect BlurRadius="4" Color="#000000" Opacity="14" ShadowDepth="0" Direction="0" />
</Border.Effect>
<ListBox x:Name="listaAtletas" Background="Transparent" BorderThickness="0" Margin="0" Padding="0" HorizontalContentAlignment="Stretch" ScrollViewer.HorizontalScrollBarVisibility="Hidden">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" IsItemsHost="True" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid MinWidth="350" Height="100">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Image Source="{Binding Imagem}" Width="40" Height="40" Grid.Column="0" />
<StackPanel Orientation="Vertical" Grid.Column="1" >
<ContentControl Content="{Binding Nome}"/>
<TextBlock Text="{Binding Nascimento}" HorizontalAlignment="Left" />
<TextBlock Text="{Binding Status}" HorizontalAlignment="Left" />
<TextBlock Text="{Binding Modalidades}" HorizontalAlignment="Left" />
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Column="2" >
<Button x:Name="EditButton" Content="E" Width="20" Height="20" />
<Button x:Name="DeleteButton" Content="X" Width="20" Height="20" />
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Border>
The ListBox if filled dynamically after reading a file. Is there something wrong with this piece of code?
Set the HorizontalScrollBarVisibility property to Disabled instead of Hidden:
<ListBox ... ScrollViewer.HorizontalScrollBarVisibility="Disabled">
...
</ListBox>
Here I have a ListBox:
<ListBox Name="listbox1" ItemsSource="{Binding Area}" Grid.Column="0" Grid.Row="0" HorizontalContentAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Green" BorderThickness="2" Margin="5" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="2*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="8*" />
</Grid.ColumnDefinitions>
<DockPanel Grid.Row="0" Grid.Column="0" Margin="2">
<TextBox PreviewTextInput="minMaxPreviewInput" IsReadOnly="{Binding AutoChange}" Text="{Binding MinIntValue, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Width="30" DockPanel.Dock="Right" TextAlignment="Right"/>
<TextBlock Text="Minimum Value" DockPanel.Dock="Left"/>
</DockPanel>
<DockPanel Grid.Row="1" Grid.Column="0" Margin="2">
<TextBox PreviewTextInput="minMaxPreviewInput" IsReadOnly="{Binding AutoChange}" Text="{Binding MaxIntValue, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Width="30" DockPanel.Dock="Right" TextAlignment="Right"/>
<TextBlock Text="Maximum Value" DockPanel.Dock="Left"/>
</DockPanel>
<DockPanel Grid.Row="2" Grid.Column="0" Margin="2">
<TextBlock Text="{Binding AreaName}" FontSize="20" DockPanel.Dock="Left"/>
<TextBlock Text=":" FontSize="20" DockPanel.Dock="Left"/>
<TextBlock Text="{Binding Start}" FontSize="20" DockPanel.Dock="Left"/>
<CheckBox FlowDirection="RightToLeft" DockPanel.Dock="Right" IsChecked="{Binding AutoChange, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
<TextBlock FlowDirection="LeftToRight" Text="Auto-Change:" />
</CheckBox>
</DockPanel>
<Border BorderBrush="Blue" BorderThickness="1" Grid.Column="1" Grid.RowSpan="3" Margin="5">
<Canvas Name="canvas1" >
<Canvas.LayoutTransform>
<ScaleTransform ScaleX="1" ScaleY="-1" CenterX=".5" CenterY=".5" />
</Canvas.LayoutTransform>
<Polyline Points="{Binding SegmentPoints}" Stroke="Black" StrokeThickness="1"/>
</Canvas>
</Border>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Everything works as great. I'm having problem accessing the Canvas size. How can I access it? Listbox.ActualHeight and ListBox.ActualWidth are bigger than the Canvas, and I need to get the Canvas exact size.
Thanks for the help in advance.
As you are trying to base the value of other bound values on the Canvas size, use OneWayToSource mode on a Binding for ActualWidth and ActualHeight to some properties on your ViewModel.
This will push the values from the control into your ViewModel allowing you to adjust the values in SegmentPoints so that they are scaled correctly according to the Canvas size.
I read many tutorials from MSDN about WPF styling and datatemplating and contenttemplating but no success.
I need to make same TabItems in my TabControl and I made manually TabItem which i want to use as host for Style and ContentTemplate for other TabItems in TabControl
<TabItem Header="1.semestar">
<Grid x:Name="GridSemestra">
<Grid.DataContext>
<ViewModel:PredmetVM/>
</Grid.DataContext>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="100"/>
<ColumnDefinition MinWidth="30"/>
</Grid.ColumnDefinitions>
<Grid.Children>
<ListBox x:Name="PredmetiLW" Grid.Row="0" BorderThickness="0" Grid.Column="0" ItemsSource="{Binding Predmeti}" HorizontalAlignment="Center" VerticalAlignment="Center" >
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Naziv}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<ListBox x:Name="RadioLW" Grid.Row="0" Grid.Column="1" BorderThickness="0" ItemsSource="{Binding Predmeti}" HorizontalAlignment="Center" VerticalAlignment="Center" >
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Ocjena}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Label Content="Prosjek Semestra :" HorizontalAlignment="Right" VerticalAlignment="Center" Grid.Row="1" Grid.Column="0" />
<Label x:Name="_prosjekSemestra" Grid.Row="1" Grid.Column="1" ContentStringFormat="F2" Content="{Binding _prosjek, Mode=OneWay}" HorizontalAlignment="Center" VerticalAlignment="Center" />
<Label Content="Ostvareni ECTS-ovi :" HorizontalAlignment="right" VerticalAlignment="Center" Grid.Row="2" Grid.Column="0" />
<Label x:Name="_ectsSemestra" Grid.Row="2" Grid.Column="1" Content="{Binding _ectsovi, Mode=OneWay}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid.Children>
</Grid>
</TabItem>
This is how you define a style for any TabItem. In the example I created a white border and a black background for the Header content of the TabItem:
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Border BorderBrush="White" BorderThickness="5" Margin="2">
<Grid Width="100" Height="100" Background="Black">
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
RecognizesAccessKey="True"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
If you want your items to render with same template set the ItemTemplate for your TabControl like below:
<TabControl ItemsSource="{Binding MyTabItems}">
<TabControl.ItemTemplate>
<DataTemplate>
<Grid x:Name="GridSemestra">
<Grid.DataContext>
<ViewModel:PredmetVM/>
</Grid.DataContext>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="100"/>
<ColumnDefinition MinWidth="30"/>
</Grid.ColumnDefinitions>
<Grid.Children>
<ListBox x:Name="PredmetiLW" Grid.Row="0" BorderThickness="0" Grid.Column="0" ItemsSource="{Binding Predmeti}" HorizontalAlignment="Center" VerticalAlignment="Center" >
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Naziv}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<ListBox x:Name="RadioLW" Grid.Row="0" Grid.Column="1" BorderThickness="0" ItemsSource="{Binding Predmeti}" HorizontalAlignment="Center" VerticalAlignment="Center" >
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Ocjena}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Label Content="Prosjek Semestra :" HorizontalAlignment="Right" VerticalAlignment="Center" Grid.Row="1" Grid.Column="0" />
<Label x:Name="_prosjekSemestra" Grid.Row="1" Grid.Column="1" ContentStringFormat="F2" Content="{Binding _prosjek, Mode=OneWay}" HorizontalAlignment="Center" VerticalAlignment="Center" />
<Label Content="Ostvareni ECTS-ovi :" HorizontalAlignment="right" VerticalAlignment="Center" Grid.Row="2" Grid.Column="0" />
<Label x:Name="_ectsSemestra" Grid.Row="2" Grid.Column="1" Content="{Binding _ectsovi, Mode=OneWay}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid.Children>
</Grid>
</DataTemplate>
</TabControl.ItemTemplate>
</TabControl>
Doing this, for all the items in property MyTabItems, TabItems will be generated
Hi buddies :) I am working on a wpf app which deals with groupboxes and wrap panel. Looking at the title, it seems to be simple but after dynamically generating set of groupboxes I am finding it difficult. Here is the scenario:
I have 2 xaml files in my project. One is CodecView.xaml and CodecWidgetView.xaml. I have dynamically generated 4 groupboxes on startup as follows:
CodecView.xaml:
<UserControl.Resources>
<DataTemplate x:Key="CWDataTemplate">
<WrapPanel>
<TextBlock Text="{Binding Description}" Margin="0,0,0,0"/>
<local:CodecWidgetView Margin="5,10,5,5"/>
</WrapPanel>
</DataTemplate>
</UserControl.Resources>
<Grid Grid.Row="0" >
<Grid Name="NumberofCodecs" >
<ItemsControl ItemTemplate="{StaticResource CWDataTemplate}" ItemsSource="{Binding CodecWidgets}"/>
</Grid>
</Grid>
CodecWidgetView.xaml:
<Grid>
<GroupBox Height="Auto" HorizontalAlignment="Stretch" Margin="5,5,5,5" Name="groupBox1" VerticalAlignment="Stretch" Width="Auto">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<ToggleButton Name="FrequencyBox" Content="Master" Grid.Column="1" Height="25" Width="50" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0" />
<ComboBox Grid.Column="2" ItemsSource="{Binding ModesList}" SelectedItem="{Binding SelectedModesList, Mode=OneWayToSource}" SelectedIndex="2" Height="23" HorizontalAlignment="Center" Margin="0,0,0,0" Name="comboBox2" VerticalAlignment="Center" Width="80" />
<ComboBox Grid.Column="0" ItemsSource="{Binding FrequencyList}" SelectedItem="{Binding SelectedFrequencyList, Mode=OneWayToSource}" SelectedIndex="0" Height="23" HorizontalAlignment="Center" Margin="0,0,0,0" Name="comboBox1" VerticalAlignment="Center" Width="80" />
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<RadioButton Style="{StaticResource {x:Type ToggleButton}}" Command="{Binding OneSixBitCommand}" Margin="0" Content="16 Bit" Name="OneSixBit" Height="25" Width="45" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" />
<RadioButton Style="{StaticResource {x:Type ToggleButton}}" Command="{Binding TwoZeroBitCommand}" Margin="0" Content="20 Bit" Name="TwoZeroBit" Height="25" Width="45" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" />
<RadioButton Style="{StaticResource {x:Type ToggleButton}}" Command="{Binding TwoFourBitCommand}" Margin="0" Content="24 Bit" Name="TwoFourBit" Height="25" Width="45" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center" />
<RadioButton Style="{StaticResource {x:Type ToggleButton}}" Command="{Binding ThreeTwoBitCommand}" Margin="0" Content="32 Bit" Name="ThreetwoBit" Height="25" Width="45" Grid.Column="3" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
<Grid Grid.Row="2">
<Label Name="BitDelay" Content="Bit Delay" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0,0,205,0" Height="25" Width="55" />
<Slider Height="23" HorizontalAlignment="Center" Minimum="0.0" Maximum="255.0" TickFrequency="1.0" Margin="95,0,0,0" Name="bitdelayslider" VerticalAlignment="Center" Width="160" />
<TextBox Name="BitDelayValue" IsReadOnly="True" Text="{Binding ElementName=bitdelayslider,Path=Value, StringFormat=0.0}" Width="40" Height="20" Margin="0,0,110,0" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
<Grid Grid.Row="3">
<Label Name="DBGain" Content="DB Gain" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0,0,205,0" Height="25" Width="55" />
<TextBox Name="DBGainValue" IsReadOnly="True" Text="{Binding ElementName=dbgainslider,Path=Value, StringFormat=0.0}" Width="40" Height="20" Margin="0,0,110,0" HorizontalAlignment="Center" VerticalAlignment="Center" />
<Slider Height="23" HorizontalAlignment="Center" Minimum="0.0" Maximum="59.5" TickFrequency="0.5" Margin="95,0,0,0" Name="dbgainslider" VerticalAlignment="Center" Width="160" />
</Grid>
</Grid>
</GroupBox>
</Grid>
CodecViewModel.cs: is a viewmodel class of CodecView.xaml
public ObservableCollection<CodecWidgetViewModel> CodecWidgets { get; set; }
public CodecViewModel()
{
CodecWidgets = new ObservableCollection<CodecWidgetViewModel>();
CodecWidgets.Add(new CodecWidgetViewModel { Description = "Location 8 - Dig Mic A" });
CodecWidgets.Add(new CodecWidgetViewModel { Description = "Location 9 - Dig Mic B" });
CodecWidgets.Add(new CodecWidgetViewModel { Description = "Location 10 - PCM A 3P3V" });
CodecWidgets.Add(new CodecWidgetViewModel { Description = "Location 11 - PCM B 3P3V" });
}
CodecWidgetViewModel.cs: is a viewmodel class of CodecWidgetView.xaml
private string _description;
public string Description
{
get
{
return _description;
}
set
{
_description = value;
OnPropertyChanged("Description");
}
}
This on startup dynamically generates 4 groupboxes one below the other. Since my windowsize is minheight = 300 and minwidth = 300, I have set scrollviewer. Since I have used Wrappanel, When i stretch it, it should behave as expected. That's when width is stretched 2nd groupbox should go to the right side of 1st row and same happens below.
On Startup:
When Width is Stretched:
Expected behaviour:
Thus looking at the expected behaviour, I want to achieve how wrappanel behaves :) Even though I have used wrappanel but it doesn't wrk as expected. Please help :)
You have used a WrapPanel as the panel of each individual item in the ItemsSource, which is not doing what you want.
Instead you have to explicitly tell the ItemsControl to use a WrapPanel as the panel for all of its children.
<ItemsControl ItemTemplate="{StaticResource CWDataTemplate}" ItemsSource="{Binding CodecWidgets}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>