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

Listview is resizing correctly in Universal App Windows 10

I've got a XAML page which is broken down with a grid as follows:
<Grid Background="Green">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
</Grid>
The first and third row contain a TextBlock each and are set to auto-resize to their height and the ListView is contained in the middle row and it is suppose to stretch within the area.
The ListView appears to be resized based on the number of items rather than the available visible area that should be allocated to the middle row.
This has 2 side effects:
I can't scroll to view the other items
It pushes the TextBlock in the third row out of the screen.
If I set a specific height on the ListView, it works as expected but I want my ListView to use the entire area of the screen between the top and bottom rows.
It displays as expected in the IDE, but no data is loaded but I can clearly see my top and bottom row (in green) and I can see the ListView is stretched between these 2 rows.
I've used this numerous times in the past but with a universal app for Windows 10, so I'm wondering if this is a new behaviour I'm not aware of or is this a bug?
This is full code without the DataTemplate for clarity sake. Just to be clear, my DataTemplate is displaying correctly, but I just can't scroll as there is no scrollbar since the listview is stretched based on the items, rather than being restricted to the available area of the middle row.
<Grid Background="Green">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="Top Row" />
<ListView ItemsSource="{Binding Items}"
Grid.Row="1"
Background="Red">
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
....
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<TextBlock Text="bottom row" Grid.Row="2"/>
</Grid>

You need to wrap your ListView in a ScrollView. This will fill the empty area and add a scroll bar as the list overflows the empty area.

I figured out the problem. It isn't a change in behaviour or a bug!
As someone mentioned that they tried to reproduce the problem and couldn't, I decided to do the same.
When I put my grid and ListView directly on the MainPage, I couldn't reproduce it.
When I put my grid and ListView on a sub-page (i.e. GridPage) and loaded it into the frame contained on the MainPage, I couldn't reproduce it
and that's when the penny dropped!!
In my code, I used (for the first time) a SplitView and this SplitView was contained in a grid with 2 rows and stupidly, both rows were set to "Auto" when I should have set the first one to Auto for my hamburger menu, logo and title and the second one should have been set to '*'.
The second I changed my second row to '*', the problem got sorted. It had nothing to do with the Grid Page which contained the grid I originally posted problem with.
<Grid Background="{ThemeResource FocusVisualWhiteStrokeThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
Here is the full code:
<Grid Background="{ThemeResource FocusVisualWhiteStrokeThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border Background="White"
Grid.Row="0"
Grid.Column="0"
Margin="0,10,0,10">
<ToggleButton Style="{StaticResource SymbolButton}"
Foreground="{ThemeResource ApplicationForegroundThemeBrush}"
FontSize="{ThemeResource ControlContentThemeFontSize}"
Command="{Binding HamburgerCommand}" >
<FontIcon x:Name="Hamburger"
FontFamily="Segoe MDL2 Assets"
Glyph=""
Foreground="#ff6600" />
</ToggleButton>
</Border>
<Border Background="White" Grid.Row="0"
Grid.Column="1" Margin="10,0,0,0">
<Image Stretch="Fill" Source="{Binding SelectedSection,
Converter={StaticResource SectionImageConverter}}"
Height="20" Width="20" />
</Border>
<Border Background="White"
Grid.Row="0"
Grid.Column="2"
Margin="10,0,0,0">
<TextBlock x:Name="Header" Text="{Binding SelectedSection,
Converter={StaticResource
SectionTitleConverter}}"
Style="{StaticResource TagLineTextStyle}"
Foreground="#ff6600"
VerticalAlignment="Center"
Margin="10,0,0,0"/>
</Border>
</Grid>
<SplitView x:Name="Splitter"
IsPaneOpen="{Binding IsPageOpen}"
DisplayMode="Inline"
Grid.Row="1">
<SplitView.Pane>
<ListBox x:Name="SectionControl" SelectionMode="Single"
ItemsSource="{Binding Sections}"
HorizontalAlignment="Left"
Background="White"
BorderThickness="0"
VerticalAlignment="Top"
SelectedItem="{Binding
SelectedSection, Mode=TwoWay}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding Converter={StaticResource
SectionImageConverter}}"
Height="17" Width="17"/>
<TextBlock Text="{Binding
Converter={StaticResource
SectionTitleConverter}}"
Margin="20,0,0,0"
Foreground="#ff6600" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="SelectionChanged">
<Core:InvokeCommandAction Command="{Binding
ItemClickCommand}"
CommandParameter="{Binding SelectedSection}" />
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
</ListBox>
</SplitView.Pane>
<SplitView.Content>
<Frame x:Name="SectionFrame"/>
</SplitView.Content>
</SplitView>
</Grid>
Thanks again for the feedback/help. Much appreciated!

C# Xaml How to get listbox selected item textbox value

I'm developing windows phone 8.1 app, and I need to get value of textboxes named:"time_tb" and "task_text_tb", that are in my selected item. This is my Xaml code:
<ListBox x:Name="list" ItemsSource="{Binding tasks}" Background="White" Margin="-1,50,-1,63">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="1" Height="76" Tapped="Grid_Tapped" Width="389">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="83*" />
<ColumnDefinition Width="307*" />
</Grid.ColumnDefinitions>
<TextBox x:Name="time_tb" Margin="0,15,276,0" TextWrapping="Wrap" Text="{Binding time}" VerticalAlignment="Top" BorderBrush="#FF49B7DC" Width="83" Height="45" FontSize="18.667" Foreground="{x:Null}" Background="White" FontFamily="Segoe UI Emoji" IsReadOnly="True" TextAlignment="Center" HorizontalAlignment="Right" Grid.ColumnSpan="2"/>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock x:Name="task_text_tb" Margin="63,14,10,39.833" HorizontalAlignment="Stretch" TextWrapping="Wrap" Text="{Binding wht}" FontSize="16" SelectionHighlightColor="#FF1455B3" Grid.RowSpan="2" />
</Grid>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
<StackPanel Height="100" Width="100"/>
</ListBox>

In your viewmodel, keep a property for the SelectedItem (binded to your list selectedItem) and 2 property for the textboxes of the current selected item that you will update when SelectedItem is changed. Then bind those 2 properties to where you want to show the values.
You may have to do some magic to find the actual selected item, because i think selected item only returns an index or something...
Hope this helps

How to access hub section control in c#

<Hub x:Name="Hub" x:Uid="Hub" Header="Clock +" Background="Black"
SectionsInViewChanged="Hub_SectionsInViewChanged">
<HubSection Tag="0" Name="WorldClock" x:Uid="WorldClock" Header="WORLD CLOCK"
DataContext="{Binding Groups}" HeaderTemplate="{ThemeResource HubSectionHeaderTemplate}" FontSize="22" >
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Style="{StaticResource SubheaderTextBlockStyle}"
Grid.Row="1" Margin="0,10,0,0" TextWrapping="Wrap"
Text="" x:Name="date_time_block"/>
</Grid>
</DataTemplate>
</HubSection>
my main concern is that in the above code there is textblock I want to know how to access that textblock in c#. I know c# but a little knew to XAML.If I put textblock outside hub section it is accessible but when I put inside hub section it is not Please help!!

how to bind a grid with an object

I am an amateur to windows phone development and also new to wpf. I have a grid :
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" >
<Grid HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Text="{Binding StrDay}"
Grid.Row="0"
Margin="9,-7,0,0"
Style="{StaticResource PhoneTextTitle1Style}"/>
<TextBlock Text="Day's Highlight"
Grid.Row="1"
FontWeight="Bold"
Style="{StaticResource PhoneTextNormalStyle}"
/>
<TextBlock Text="{Binding DaysHighlight}"
Grid.Row="2"
Style="{StaticResource PhoneTextNormalStyle}"
/>
<TextBlock Text="My Whole Day"
Grid.Row="3"
FontWeight="Bold"
Style="{StaticResource PhoneTextNormalStyle}"
/>
<TextBlock Text="{Binding WholeDay}"
Grid.Row="4"
Style="{StaticResource PhoneTextNormalStyle}"
/>
</Grid>
I want to bind it with the DayDetail object. I should mention that DayDetail is not a collection. it is just an object of a class that has StrDay, DaysHighlight, WholeDay Property. I am following MVVM structure.
public void loadSelectedData(int Id)
{
try
{
DayDetail = myDiaryData.tblMyDailyDiary.Single(details => details.Id == Id);
}
catch (Exception e)
{
}
}

I've found the solution.
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" DataContext="{Binding DayDetail}" >
just adding DataContext="{Binding DayDetail}" bind the whole thing. thanks for everyone's help. it is working nice for me