NavBarControl

De Banane Atomic
Révision datée du 20 novembre 2014 à 16:12 par Nicolas (discussion | contributions) (→‎SelectedItem)
(diff) ← Version précédente | Voir la version actuelle (diff) | Version suivante → (diff)
Aller à la navigationAller à la recherche

SelectedItem

Xaml.svg
<dxn:NavBarControl EachGroupHasSelectedItem="False" SelectedItem="{Binding Path=SelectedItem, Mode=TwoWay}">
The SelectedItem property is in effect only if this NavBarControl can have only one selected item at a time: EachGroupHasSelectedItem = False

Statique

Xaml.svg
<!-- xmlns:dxn="http://schemas.devexpress.com/winfx/2008/xaml/navbar" -->
<dxn:NavBarControl>
    <dxn:NavBarControl.View>
        <dxn:SideBarView />
    </dxn:NavBarControl.View>
    <dxn:NavBarGroup Header="Group 1">
        <dxn:NavBarItem Content="Item 1"/>
        <dxn:NavBarItem Content="Item 2"/>
    </dxn:NavBarGroup>
    <dxn:NavBarGroup Header="Group 2">
        <dxn:NavBarItem Content="Item 1"/>
        <dxn:NavBarItem Content="Item 2"/>
    </dxn:NavBarGroup>
</dxn:NavBarControl>

Dynamique avec bindings

ObservableCollection

Xaml.svg
<dxn:NavBarControl ItemsSource="{Binding}">
    <dxn:NavBarControl.Resources>
        <Style TargetType="dxn:NavBarGroup"> <!-- un élément de la liste (Tuple) -->
            <Setter Property="Header" Value="{Binding Item1}"/>
            <Setter Property="ItemsSource" Value="{Binding Item2}"/>
        </Style>
        <Style TargetType="dxn:NavBarItem"> <!-- un élément de la sous-liste (String) -->
            <Setter Property="Content" Value="{Binding}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <DataTemplate>
                        <TextBlock Text="{Binding}"/>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </dxn:NavBarControl.Resources>
</dxn:NavBarControl>
Csharp.svg
public ObservableCollection<Tuple<string, List<string>>> groups { get; set; }

public MainWindow()
{
    InitializeComponent();

    groups = new ObservableCollection<Tuple<string, List<string>>>();
    groups.Add(new Tuple<string, List<string>>("g1", new List<string>() { "1", "2" }));
    groups.Add(new Tuple<string, List<string>>("g2", new List<string>() { "3", "4" }));

    DataContext = groups;
}

private void Button_Click(object sender, RoutedEventArgs e)
{
    groups.Add(new Tuple<string, List<string>>("g3", new List<string>() { "5", "6" }));
}

Dictionary

Xaml.svg
<dxn:NavBarControl ItemsSource="{Binding}">
    <dxn:NavBarControl.Resources>
        <Style TargetType="dxn:NavBarGroup"> <!-- un élément de la liste (KeyValuePair) -->
            <Setter Property="Header" Value="{Binding Key}"/>
            <Setter Property="ItemsSource" Value="{Binding Value}"/>
        </Style>
        <Style TargetType="dxn:NavBarItem"> <!-- un élément de la sous-liste (String) -->
            <Setter Property="Content" Value="{Binding}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <DataTemplate>
                        <TextBlock Text="{Binding}"/>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </dxn:NavBarControl.Resources>
</dxn:NavBarControl>
Csharp.svg
public MainWindow()
{
    InitializeComponent();

    var groups = new Dictionary<string, List<string>>();
    groups["g1"] = new List<string>() { "1", "2" };
    groups["g2"] = new List<string>() { "3", "4" };

    DataContext = groups;
}

DataTable

Xaml.svg
<dxn:NavBarControl Name="navBarControl1" ItemsSource="{Binding}" GroupDescription="Group">
    <dxn:NavBarControl.View>
        <dxn:SideBarView />
    </dxn:NavBarControl.View>
    <dxn:NavBarControl.Resources>
        <Style TargetType="dxn:NavBarGroup">
            <Setter Property="Header" Value="{Binding}"/>
        </Style>
        <Style TargetType="dxn:NavBarItem">
            <Setter Property="Content" Value="{Binding Path=Item}"/>
        </Style>
    </dxn:NavBarControl.Resources>
</dxn:NavBarControl>
GroupDescription permet de définir la propriété à utiliser pour le regroupement en groupe / titre.

Type d'affichage

  • ExplorerBarView
  • NavigationPaneView
  • SideBarView