Develop Reference

C# WPF - How to Change a 'Preferences' Window's Displayed Grid using a ListView?

I am currently in the process of making a 'Preferences' window in my C# WPF program.
The aim of this window is to have a ListView on the left, and a list of tweakable controls on the right.
Each item in the ListView directly corresponds to a Grid that contains all of the controls under the selected item's content.
Once the item in the ListView is changed, the current grid's visibility must be collapsed, and the grid that corresponds to the item selected's visibility must be changed to visible.
I thought that DataBinding might work for this, however I have no idea how to use it. Could someone please inform me how to implement this feature?
I have only one grid at the moment. The whole window looks like this:
<Window x:Class="DarkOrbit_Skill_Price_Calculator.DarkOrbit_Skill_Price_Calculator___Preferences"
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"
xmlns:local="clr-namespace:DarkOrbit_Skill_Price_Calculator"
mc:Ignorable="d"
Title="DarkOrbit Skill Price Calculator - Preferences" Height="360" Width="640" WindowStartupLocation="CenterScreen" WindowStyle="ToolWindow">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ListView Name="ListView_PreferenceOption" Width="150" Margin="5" SelectionChanged="SelectionChanged_ListView_PreferenceOption">
<ListViewItem IsSelected="True">
<StackPanel Orientation="Horizontal">
<Image Source="Images\Installing Updates.png" Height="35"/>
<TextBlock Text="Update" FontSize="14" FontFamily="Segoe UI" VerticalAlignment="Center" Margin="5"/>
</StackPanel>
</ListViewItem>
</ListView>
<Grid Margin="5" Name="Grid_Update" Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<Label Content="Update Version Architecture" VerticalAlignment="Center"/>
<ComboBox IsReadOnly="True" Width="100" Margin="5">
<ComboBoxItem Content="64-Bit"/>
<ComboBoxItem Content="32-Bit" IsSelected="True"/>
</ComboBox>
</StackPanel>
</Grid>
</Grid>
</Window>
I have absolutely no clue as to how to swap the grid depending on the index selected.

You can bind the visibility of each grid to the selected state of its corresponding list item by referencing the ListViewItem element. Something like this:
<Grid>
<Grid.Resources>
<BooleanToVisibilityConverter x:Key="Converter" />
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ListView Width="150" Margin="5">
<ListViewItem IsSelected="True" x:Name="One">
<TextBlock Text="Update" FontSize="14" FontFamily="Segoe UI"
VerticalAlignment="Center" Margin="5"/>
</ListViewItem>
<ListViewItem IsSelected="False" x:Name="Two">
<TextBlock Text="Foo" FontSize="14" FontFamily="Segoe UI"
VerticalAlignment="Center" Margin="5"/>
</ListViewItem>
</ListView>
<Grid Margin="5" Grid.Column="1"
Visibility="{Binding IsSelected, ElementName=One, Converter={StaticResource Converter}}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<Label Content="Update Version Architecture" VerticalAlignment="Center"/>
<ComboBox IsReadOnly="True" Width="100" Margin="5">
<ComboBoxItem Content="64-Bit"/>
<ComboBoxItem Content="32-Bit" IsSelected="True"/>
</ComboBox>
</StackPanel>
</Grid>
<Grid Margin="5" Grid.Column="1"
Visibility="{Binding IsSelected, ElementName=Two, Converter={StaticResource Converter}}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<Label Content="Update Something Else" VerticalAlignment="Center"/>
<ComboBox IsReadOnly="True" Width="100" Margin="5">
<ComboBoxItem Content="64-Bit"/>
<ComboBoxItem Content="32-Bit" IsSelected="True"/>
</ComboBox>
</StackPanel>
</Grid>
</Grid>

For those who are having the same predicament and want to use C# code to make this work, I eventually thought of the following code:
StackPanel[] allGrids = { Grid_1, Grid_2, Grid_3, Grid_4, ... }; //Replace StackPanel with the
//type of control you are using, e.g. Grid or WrapPanel.
foreach (StackPanel grid in allGrids)
{
grid.Visibility = Visibility.Collapsed; //collapse all grids
}
allGrids[(your listview/other control).SelectedIndex].Visibility = Visibility.Visible;
//make the grid you need visible

Bind objects in the lists below in WPF ItemsControl

I need to binding objects of the lists below in a ItemsControl binded in a ScrollViewer in wpf .
I Provand assigning a path but I still can not binding, maybe I'm wrong ? In the subject of the first level the bind is successful , but when I go down in the lists below of the same object bind will not work.
Xaml Scrollviewer:
<surface:SurfaceScrollViewer Grid.Row="2" VerticalScrollBarVisibility="Hidden" Background="#fff" PanningMode="VerticalOnly">
<ItemsControl x:Name="scrollViewerFolderItemsSource" ItemsSource="{Binding Path=companies}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<surface:SurfaceButton Tag="{Binding CPID}" Click="Open_Click" Grid.ColumnSpan="2">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Border BorderThickness="0,1,0,0" BorderBrush="Gray" Height="57" Background="White">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Background="#fff"></Grid>
<Image Grid.Row="0" Grid.Column="0" Width="32" VerticalAlignment="Center" HorizontalAlignment="Center" Source="{Binding ImageFolder}"></Image>
<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding CompanyName}" Foreground="#565656" FontFamily="{StaticResource Lato Semibold}" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="10" Margin="10,3,0,0" Style="{DynamicResource Lato-Semibold}"/>
<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding companies.Attachments.Name}" Foreground="#565656" FontFamily="{StaticResource Lato Semibold}" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="10" Margin="10,3,0,0" Style="{DynamicResource Lato-Semibold}"/>
<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding AttachmentFolders.Name}" Foreground="#565656" FontFamily="{StaticResource Lato Semibold}" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="10" Margin="10,3,0,0" Style="{DynamicResource Lato-Semibold}"/>
</Grid>
</Border>
</ControlTemplate>
</Button.Template>
</surface:SurfaceButton>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</surface:SurfaceScrollViewer>
CodeBehind view list binded:
My target is binding Text="{Binding companies.Attachment.Name}"
If i print Text="{Binding Attachment}" my result print on deploy is "(Collection)", why print Attachment.Name ?

Attachments is a Collection, to visualize a collection you should use a ListBox and use this binding ItemsSource="{Binding companies.Attachment}", you also need to define the ItemTemplate for the ListBox.
With the ListBox you are able to visualize all the element, but if you want to show just the first attachment name you can use this binding Text="{Binding companies.Attachment[0].Name}"
or another solution could be to create a new property called AttachmentToShow of type Attachment and use this binding
Text="{Binding AttachmentToShow.Name}"
with this solution updating AttachmentToShow will result on an UI update.

WPF ItemsControl content cropping rather than scrolling

I have a .NET 4.0 WPF application using the MVVM pattern and I've been unable to achieve the desired outcome on one of the screens (UserControl as View). I have stripped down most of the page to show the core of the problem. The page consists of a grid with three rows and one column. The first row contains header text and the last row contains a Save button. The middle row contains a grid with one row and column and displays an ObservableCollection in an ItemsControl with a data template of a custom user control. There are ten items in the collection and I want them to display in two columns and five rows so I have a WrapPanel as an ItemsPanelTemplate.
I want the ItemsControl to scroll within the available space but it is expanding to the size of content and most of it is being cropped off the bottom of the page.
I am listing the XAML for user control the ObservableCollection uses as a data template and the XAML for the main page below that. Any help is greatly appreciated.
<UserControl x:Class="OIL.UserControls.ShopNotes.ShopNoteComponent"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="120" d:DesignWidth="150">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Border Grid.Row="0" Grid.Column="0" Width="140" Margin="5,5,5,5" HorizontalAlignment="Center" VerticalAlignment="Top" BorderBrush="Black" BorderThickness="1" CornerRadius="5">
<StackPanel Width="120" Margin="0,5,0,5" HorizontalAlignment="Center" VerticalAlignment="Top" Orientation="Vertical">
<Image Height="25" Width="30" HorizontalAlignment="Left" Source="/OIL;component/Images/BlueCam.png">
<Image.ToolTip>
<Image Source="{Binding Path=ToolTipImagePath}" />
</Image.ToolTip>
</Image>
<Label Style="{DynamicResource LargeText}" Content="{Binding Path=ComponentTitle}" />
<CheckBox Width="80" Margin="0,5,0,5" HorizontalAlignment="Left" Style="{DynamicResource NormalText}" Content=" Mandatory?"
IsChecked="{Binding Path=ComponentMandatory, Mode=TwoWay}"
IsEnabled="{Binding Path=ComponentSelected}" />
<CheckBox Width="15" Margin="0,5,0,5" HorizontalAlignment="Center"
IsChecked="{Binding Path=ComponentSelected, Mode=TwoWay}" />
</StackPanel>
</Border>
</Grid>
And here is the main XAML page:
<UserControl x:Class="OIL.View.ConfiguratorViews.Configurator_ShopNotes_Tab"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:igWPF="http://infragistics.com/Editors"
xmlns:uc="clr-namespace:OIL.UserControls.ShopNotes"
mc:Ignorable="d"
d:DesignHeight="570" d:DesignWidth="866">
<UserControl.Resources>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
<DataTemplate x:Key="ShopNotesComponentsTemplate">
<uc:ShopNoteComponent />
</DataTemplate>
</UserControl.Resources>
<Border Margin="10" CornerRadius="13" BorderThickness="3" BorderBrush="#FF666666">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="*" />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Row="0" Grid.Column="0" Orientation="Horizontal">
<Button Height="30" Width="75" Margin="10,5,0,5" HorizontalAlignment="Center" VerticalAlignment="Center" Background="{x:Null}"
Command="{Binding Path=AddNewTemplateCommand}"
Content="Add" />
<Button Height="30" Width="75" Margin="10,5,0,5" HorizontalAlignment="Center" VerticalAlignment="Center" Background="{x:Null}"
Command="{Binding Path=EditTemplateCommand}"
Content="Edit" />
<Grid Margin="10,5,0,5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Row="0" Grid.Column="0" Orientation="Horizontal" Visibility="{Binding Path=IsNewTemplate, Converter={StaticResource BooleanToVisibilityConverter}}">
<TextBox Height="30" Width="250" HorizontalAlignment="Left" VerticalAlignment="Center" Style="{DynamicResource NormalText}" Text="{Binding Path=TemplateDescription}" />
</StackPanel>
<StackPanel Grid.Row="0" Grid.Column="0" Orientation="Horizontal" Visibility="{Binding Path=IsEditedTemplate, Converter={StaticResource BooleanToVisibilityConverter}}">
<igWPF:XamComboEditor Name="cmbShopNotesTemplate" Height="30" HorizontalAlignment="Left" VerticalAlignment="Center"
ItemsSource="{Binding Path=ShopNoteTemplates, Mode=TwoWay}"
DisplayMemberPath="CONFIGURATION_DESC"
SelectedItem="{Binding Path=SelectedShopNoteTemplate, ValidatesOnDataErrors=True}"
Value="Select Shop Notes Template"
NullText="Select Shop Notes Template"
IsEditable="True">
</igWPF:XamComboEditor>
</StackPanel>
</Grid>
</StackPanel>
<Grid Grid.Row="1" Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Height="30" Margin="0,5,0,5" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{DynamicResource NormalText}" Content="* Hover over camera icon to view Shop Note component" />
<ItemsControl Grid.Row="1" Grid.Column="0" HorizontalAlignment="Left"
ItemsSource="{Binding Path=ShopNoteComponents, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
ItemTemplate="{StaticResource ShopNotesComponentsTemplate}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Width="300" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</Grid>
<Button Grid.Row="2" Grid.Column="0" Height="30" Width="150" Margin="10,10,0,10" HorizontalAlignment="Left" VerticalAlignment="Center"
Background="{x:Null}"
Command="{Binding Path=SaveTemplateCommand}"
Content="Save" />
</Grid>
</Border>
EDIT: Changed question title as I have removed the ScrollViewer between starting the question and actually posting it. Also, noticed the Save button was in the inner grid rather than outer grid so I have corrected that (no change in rendering).

An ItemsControl does not have its own ScrollViewer like a ListBox. You can either replace you ItemsControl with a ListBox, or simply wrap it in a ScrollViwer, being careful to move the Grid.Row and Grid.Column settings like this:
<ScrollViewer Grid.Row="1" Grid.Column="0">
<ItemsControl HorizontalAlignment="Left" ItemsSource="{Binding Path=Items,
UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
ItemTemplate="{StaticResource ShopNotesComponentsTemplate}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Width="300" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</ScrollViewer>

Column marging on a WPF Grid

I created a grid. On this grid, i have two colums with two TextBlock
I would like to insert a space between my columns, in order to having space between my textBlocks.
How doing this ?
Here is my code :
<ListBox x:Name="ListBoxTiers" HorizontalContentAlignment="Stretch" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" VerticalAlignment="Top">
<Grid Margin="10" VerticalAlignment="Top" HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" x:Name="TxtBox_CodeTiers" TextWrapping="Wrap" Text="{Binding m_strCode}" HorizontalAlignment="Stretch" VerticalAlignment="Top" />
<TextBlock Grid.Row="0" Grid.Column="1" x:Name="TxtBox_NomTiers" TextWrapping="Wrap" Text="{Binding m_strNom}" HorizontalAlignment="Stretch" VerticalAlignment="Top" />
</Grid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Thanks a lot :)

Instead of playing with the columnns, set a margin around the textbox.
<TextBox Margin="10">
You can set each side independently or set left/right and up/down:
<TextBox Margin="10, 3, 7, 0">
<TextBox Margin="10, 5">
Or wrap your TextBoxes inside another panel and set the margin there:
<Grid Margin="10">
<TextBox />
<TextBox />
</Grid>

how to manage tile usercontrols(having listbox binding) in MVVM model?

//this is usercontrol code
<ListBox Name="OvernightAverageListBox" ItemsSource="{Binding Path=OvernightAverageCollections}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Name="items" Background="{Binding BackColor}" Height="200" Width="200">
<TextBlock Height="46" HorizontalAlignment="Left" Margin="26,10,0,0" Name="currentRate" Text="{Binding Current_rate}" VerticalAlignment="Top" FontSize="36" />
<TextBlock Height="22" HorizontalAlignment="Left" Margin="26,20,0,0" Name="rate_difference" Text="{Binding RateChange_Value}" VerticalAlignment="Top" FontSize="20" />
<TextBlock Height="30" HorizontalAlignment="Left" Margin="26,30,0,0" Name="productName" Text="{Binding Product_name}" VerticalAlignment="Top" FontSize="24" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
//this is binding code on view
<controls:PanoramaItem Header="Overnight Average" Tap="RateTile_Tap">
<Grid x:Name="overnightAverage">
<views:OvernightAverageTileControl x:Name="eventsView"> </views:OvernightAverageTileControl>
</Grid>
</controls:PanoramaItem>
</ListBox>
now acoording to my code the tiles are coming vertically means each tile is taking in one row.
but i want them to come both horizontally and vertically means two tiles in each row.
plz share ur suggetion i am new to xaml designing.
first image shows wat i am getting.
second image is wat i want.
thanks :)

You could replace the StackPanel in your DataTemplate by a Grid:
<DataTemplate>
<Grid Name="items" Background="{Binding BackColor}" Height="200" Width="200">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0" Text="{Binding Current_rate}" ... />
<TextBlock Grid.Column="1" Grid.Row="0" Text="{Binding RateChange_Value}" ... />
<TextBlock Grid.Column="0" Grid.Row="1" Text="{Binding Product_name}" ... />
</Grid>
</DataTemplate>
You may also specify absolute or relative widths of the columns and heights of the rows by setting the ColumnDefinition.Width and the RowDefinition.Height properties.

I have done it successfully using WrapPanel in toolkit oct 2011.
http://www.windowsphonegeek.com/upload/articles/WrapPanelDemo.zip