How to implement Expander view with multi level(tree view) from code behind in windows phone 8?
Nambukarthy
I have done this by using static records in xaml and which works perfectly, here in this example i have added three levels of expander view, my entire xaml code is below
<toolkit:ExpanderView x:Name="India" Header="India" FontSize="40" >
<toolkit:ExpanderView.Items>
<toolkit:ExpanderView x:Name="Karnataka" Header="Karnataka" FontSize="40" >
<toolkit:ExpanderView.Items>
<toolkit:ExpanderView x:Name="Bangalore" Header="Bangalore" FontSize="40" >
<toolkit:ExpanderView.Items>
<TextBlock Text="RamamurthyNagar"></TextBlock>
<TextBlock Text="VasanthNagar"></TextBlock>
<TextBlock Text="CentralSilkBoard"></TextBlock>
</toolkit:ExpanderView.Items>
</toolkit:ExpanderView>
</toolkit:ExpanderView.Items>
</toolkit:ExpanderView>
<toolkit:ExpanderView x:Name="TamilNadu" Header="TamilNadu" FontSize="40" >
<toolkit:ExpanderView.Items>
<toolkit:ExpanderView x:Name="Coimbatore" Header="Coimbatore" FontSize="40" >
<toolkit:ExpanderView.Items>
<toolkit:ExpanderView x:Name="GandhiPuram" Header="Gandhipuram" FontSize="40" Width="200">
<toolkit:ExpanderView.Items>
<toolkit:ExpanderView x:Name="Sidhhapudhur" Header="Sidhhapudhur" FontSize="40" >
</toolkit:ExpanderView>
</toolkit:ExpanderView.Items>
</toolkit:ExpanderView>
<toolkit:ExpanderView x:Name="SaibabaColony" Header="SaibabaColony" FontSize="40" Width="200" >
</toolkit:ExpanderView>
</toolkit:ExpanderView.Items>
</toolkit:ExpanderView>
</toolkit:ExpanderView.Items>
</toolkit:ExpanderView>
</toolkit:ExpanderView.Items>
</toolkit:ExpanderView>
<toolkit:ExpanderView x:Name="Canada" Header="Canada" FontSize="40" >
<toolkit:ExpanderView.Items>
<toolkit:ExpanderView x:Name="BritishColombia" Header="BritishColombia" FontSize="40" >
<toolkit:ExpanderView.Items>
<TextBlock Text="Vancouver"></TextBlock>
</toolkit:ExpanderView.Items>
</toolkit:ExpanderView>
<toolkit:ExpanderView x:Name="Ontario" Header="Ontario" FontSize="40" >
<toolkit:ExpanderView.Items>
<TextBlock Text="Toronoto"></TextBlock>
</toolkit:ExpanderView.Items>
</toolkit:ExpanderView>
</toolkit:ExpanderView.Items>
</toolkit:ExpanderView>
<toolkit:ExpanderView x:Name="UnitedStates" Header="UnitedStates" FontSize="40" />
i want to bind the same details from code behind. Thanks in advance:)
Nambukarthy
Here the solution for my question.
Xaml Code:
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ListBox Grid.Row="0" x:Name="listCountries">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<toolkit:ExpanderView Header="{Binding}" IsExpanded="{Binding IsExpanded1, Mode=TwoWay}" HeaderTemplate="{StaticResource FirstLevelHeaderTemplate}">
<!--ItemsSource="{Binding states}" ItemTemplate="{StaticResource FirstLevelItemTemplate}"-->
<toolkit:ExpanderView.Items>
<Grid Height="Auto">
<ListBox x:Name="listStates" ItemsSource="{Binding states}">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<toolkit:ExpanderView Header="{Binding}"
IsExpanded="{Binding IsExpanded2, Mode=TwoWay}"
HeaderTemplate="{StaticResource SecondLevelHeaderTemplate}">
<!-- ItemsSource="{Binding cities}" ItemTemplate="{StaticResource SecondLevelItemTemplate}"-->
<toolkit:ExpanderView.Items>
<Grid Height="Auto">
<ListBox x:Name="listCities" ItemsSource="{Binding cities}">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<!--<TextBlock Text="{Binding City}"></TextBlock>-->
<toolkit:ExpanderView Header="{Binding}"
IsExpanded="{Binding IsExpanded3, Mode=TwoWay}"
HeaderTemplate="{StaticResource ThirdLevelHeaderTemplate}">
<!-- ItemsSource="{Binding cities}" ItemTemplate="{StaticResource SecondLevelItemTemplate}"-->
<toolkit:ExpanderView.Items>
<Grid Height="Auto">
<ListBox x:Name="listAreas" ItemsSource="{Binding areas}">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Area}"></TextBlock>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</toolkit:ExpanderView.Items>
</toolkit:ExpanderView>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</toolkit:ExpanderView.Items>
</toolkit:ExpanderView>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</toolkit:ExpanderView.Items>
</toolkit:ExpanderView>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
CS Code:
public partial class SecondPage : PhoneApplicationPage
{
public SecondPage()
{
InitializeComponent();
List<Countries> objCountries = new List<Countries>()
{
new Countries() { Country = "India", states = new List<States>
{
new States() { State = "Karnataka" , cities = new List<Cities>
{
new Cities(){ City = "Bangalore", areas = new List<Areas>
{
new Areas(){Area="RamamurthyNagar"},
new Areas(){Area="VasanthNagar"},
new Areas(){Area="RamamurthyNagar"}}
},
}},
new States() { State = "TamilNadu", cities = new List<Cities>
{
new Cities(){ City = "Coimbatore", areas=null}}
},
}},
new Countries() { Country = "Canada", states = new List<States>
{
new States() { State = "BritishColombia" , cities = new List<Cities>
{
new Cities(){ City = "Vancouver" , areas = null}}
},
new States() { State = "Ontario", cities = new List<Cities>
{
new Cities(){ City = "Toronto", areas =null}}
},
}},
new Countries() { Country = "UnitedStates", states = new List<States>
{
new States() { State = "NewHampshire" , cities = new List<Cities>
{
new Cities(){ City = "Dover", areas= null}}
},
new States() { State = "NewJersy", cities = new List<Cities>
{
new Cities(){ City = "Jersycity", areas=null}}
},
}},
};
this.listCountries.ItemsSource = objCountries;
}
}
public class Countries : INotifyPropertyChanged
{
private bool isExpanded1;
public string Country { get; set; }
public IList<States> states { get; set; }
public bool IsExpanded1
{
get
{
return this.isExpanded1;
}
set
{
if (this.isExpanded1 != value)
{
this.isExpanded1 = value;
this.OnPropertyChanged("IsExpanded");
}
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged(string propertyName)
{
PropertyChangedEventHandler handler = this.PropertyChanged;
if (handler != null)
{
handler(this, new PropertyChangedEventArgs(propertyName));
}
}
}
public class States : INotifyPropertyChanged
{
public string State { get; set; }
public IList<Cities> cities { get; set; }
private bool isExpanded2;
public bool IsExpanded2
{
get
{
return this.isExpanded2;
}
set
{
if (this.isExpanded2 != value)
{
this.isExpanded2 = value;
this.OnPropertyChanged("IsExpanded");
}
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged(string propertyName)
{
PropertyChangedEventHandler handler = this.PropertyChanged;
if (handler != null)
{
handler(this, new PropertyChangedEventArgs(propertyName));
}
}
}
public class Cities : INotifyPropertyChanged
{
public string City { get; set; }
public IList<Areas> areas { get; set; }
private bool isExpanded3;
public bool IsExpanded3
{
get
{
return this.isExpanded3;
}
set
{
if (this.isExpanded3 != value)
{
this.isExpanded3 = value;
this.OnPropertyChanged("IsExpanded");
}
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged(string propertyName)
{
PropertyChangedEventHandler handler = this.PropertyChanged;
if (handler != null)
{
handler(this, new PropertyChangedEventArgs(propertyName));
}
}
}
public class Areas
{
public string Area { get; set; }
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
edited at
- Prev: Not able to connect sql server 2008 r2 with java
- Next: vba intercept internet explorer link click
Related
TOP Ranking
- 1
pump.io port in URL
- 2
How to import an asset in swift using Bundle.main.path() in a react-native native module
- 3
Failed to listen on localhost:8000 (reason: Cannot assign requested address)
- 4
Double spacing in rmarkdown pdf
- 5
SQL Server : need add a dot before two last character
- 6
C++ 16 bit grayscale gradient image from 2D array
- 7
JMeter: Why get error when try to save test plan
- 8
JWT gives JsonWebTokenError "invalid token"
- 9
How to make thrown errors visible outside of a Promise?
- 10
How to tell if iOS Today Widget is being updated in the background?
- 11
Calling Doctrine clear() with an argument is deprecated
- 12
Capybara Selenium Chrome opens About Google Chrome
- 13
How to update azerothcore-wotlk docker container
- 14
Adding Ripple Effect to RecyclerView item
- 15
mysql.connector.errors.InterfaceError: 2003: Can't connect to MySQL server on '127.0.0.1:3306' (111 Connection refused)
- 16
Error while applying filter on dataframe - PySpark
- 17
Unable to add slack to bluemix project
- 18
MyPy fails dataclass argument with optional list of objects type
- 19
How can I validate and parse phone numbers to extract their country calling code and area code?
- 20
Single Sign-On in Spring by using SAML Extension and Shibboleth
- 21
python how to create many-to-many of lists inside one list
Comments