none
WPF - XAML : Design of "Computer" RRS feed

  • Question

  • Hello,

    I want to do the same idea that the Menu "Computer" in Windows 7 as :

    Which controls xaml are used to do this design (violet) ?

    The global design is a treeview I think, no ?

    Thank you.

    Best regards,

    Thursday, November 7, 2013 9:27 AM

Answers

  • Select Image control in designer and set Source property as shown in image

    And you can set Grid's Margin property in ListBox.Items

    <ListBox.Items>
    					<Grid Margin="5,5,0,0">
    						<Grid.ColumnDefinitions>
    							<ColumnDefinition Width="Auto"/>
    						</Grid.ColumnDefinitions>
    						<StackPanel Orientation="Horizontal" Margin="5">
    						<Image Source="icone_hdd_disque.ico" Height="64" Width="64" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="5" />
    							<StackPanel Orientation="Vertical" Grid.Column="1">
    								<TextBlock Text="WINDOWS (C:)" Margin="5" FontSize="13.333" Foreground="Black"/>
    								<ProgressBar Height="25" Value="80" Margin="5"/>
    								<TextBlock Text="130 Go de libre sur 197 Go" Margin="5" FontSize="13.333" Foreground="Gray" TextWrapping="NoWrap"/>
    							</StackPanel>
    						</StackPanel>
    					</Grid>
    			</ListBox.Items>


    Gaurav Khanna | Microsoft VB.NET MVP | Microsoft Community Contributor


    • Edited by Khanna Gaurav Saturday, November 9, 2013 6:55 PM
    • Marked as answer by Yang,Chenfei Wednesday, November 13, 2013 5:48 AM
    Saturday, November 9, 2013 6:47 PM

All replies

  • You specify the appearance for each type of leaf in the treeview by using a DataTemplate and set its DataType property and there is a Border element which you can use to draw the border:

            <TreeView x:Name="treeView" xmlns:local="clr-namespace:WpfApplicationDataGrid">
                <TreeView.Resources>
                    <HierarchicalDataTemplate DataType="{x:Type local:DeviceGroup}" ItemsSource="{Binding Devices}">
                        <TextBlock Text="{Binding Path=Name}" />
                    </HierarchicalDataTemplate>
                    <DataTemplate DataType="{x:Type local:Device}">
                        <Border BorderBrush="Violet" BorderThickness="2">
                            <TextBlock Text="{Binding Path=Name}" />
                        </Border>
                    </DataTemplate>
                </TreeView.Resources>
            </TreeView>

                List<DeviceGroup> groups = new List<DeviceGroup>();
                DeviceGroup a = new DeviceGroup();
                a.Name = "Hard disk drives";
                a.Devices = new List<Device>();
                a.Devices.Add(new Device() { Name = "Local disc" });
                DeviceGroup b = new DeviceGroup();
                b.Name = "Devices with....";
                groups.Add(a);
                groups.Add(b);
                treeView.ItemsSource = groups;
    
        class DeviceGroup
        {
            public string Name { get; set; }
            public IList<Device> Devices { get; set; }
        }
    
        class Device
        {
            public string Name { get; set; }
        }
    

    Thursday, November 7, 2013 12:22 PM
  • Hello Magnus,

    Thank you for your answer.

    I'm sorry, I had trouble expressing myself, I want do the same as that is inside the violet binding at my picture : use a contrôle have icon, text, progressbar, this all inside a treeview.

    What is the contrôle I must use to do it ? I will wish to use a listbox, is it correct to list the drives of my computer in computer menu  ?

    Thank you,

    Best regards,

    Thursday, November 7, 2013 4:51 PM
  • You can have a following code to show a ListBox of Drives (i.e. C, D, etc) in a TreeView. 

    <ListBox Name="MyListBox">
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapPanel Orientation="Horizontal"/>
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>
    
                            <Image Source="{Binding DriveImagePath}" Width="32" Height="32" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="4"/>
                            <StackPanel Orientation="Vertical" Grid.Column="1">
                                <TextBlock Text="{Binding DriveName}" Margin="3" FontSize="14"/>
                                <ProgressBar Height="25" Value="{Binding AvailableSpace}" Margin="3" />
                                <TextBlock Text="{Binding AvailableSpaceText}" Margin="3"/>
                            </StackPanel>
                        </Grid>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
    For DataBinding you would have to create a class having properties such as DriveImagePath (for drive image), Drive Name (C Drive), AvailableSpace (to show percentage of Available space in progress bar) and AvailableSpaceText (to show for example "10 GB free of 20GB") 


    Gaurav Khanna | Microsoft VB.NET MVP | Microsoft Community Contributor

    • Proposed as answer by Mr. Javaman II Thursday, November 7, 2013 7:38 PM
    Thursday, November 7, 2013 7:04 PM
  • Hello,

    I will try it today, and if it's what I search, mark it as answer.

    Thank you.

    Best regards,

    Friday, November 8, 2013 9:12 AM
  • Hello Khanna Gaurav,

    I try your code without the databinding, I use real values but I have a problem (I begin with XAML) :

    The code are compiling, but nothing are on the screen. Any idea ?

    Thank you.

    Best regards,

    Friday, November 8, 2013 1:33 PM
  • Did you set the ItemsSource property of the ListBox to some collection of objects? Gaurav's example assumes that the objects in the ItemsSource collection of the ListBox has some properties called DriveImagePath, DriveName and AvailableSpaceText.
    Friday, November 8, 2013 1:42 PM
  • Post your XAML code. You don't need ItemTemplate if you are coding without DataBinding.

    <ListBox Name="MyListBox">
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapPanel Orientation="Horizontal"/>
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
                <ListBox.Items>
                    <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>
    
                            <Image Source="Images/Image1.jpg" Width="32" Height="32" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="4"/>
                            <StackPanel Orientation="Vertical" Grid.Column="1">
                                <TextBlock Text="Local Disk C" Margin="3" FontSize="14"/>
                                <ProgressBar Height="25" Value="40" Margin="3" />
                                <TextBlock Text="30 GB free of 50GB" Margin="3"/>
                            </StackPanel>
                        </Grid>
                </ListBox.Items>
            </ListBox>


    Gaurav Khanna | Microsoft VB.NET MVP | Microsoft Community Contributor

    Friday, November 8, 2013 1:47 PM
  • Hello,

    I wrote this code :

                <ListBox.ItemsPanel>
    				<ItemsPanelTemplate>
    					<WrapPanel Orientation="Horizontal"/>
    				</ItemsPanelTemplate> 
    			</ListBox.ItemsPanel>
    			
    			<ListBox.Items>
    					<Grid>
    						<Grid.ColumnDefinitions>
    							<ColumnDefinition Width="Auto"/>
    						</Grid.ColumnDefinitions>
    						<StackPanel Orientation="Horizontal" Margin="5">
    						<Image Source="icone_hdd_disque.ico" Height="64" Width="64" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="5" />
    							<StackPanel Orientation="Vertical" Grid.Column="1">
    								<TextBlock Text="WINDOWS (C:)" Margin="5" FontSize="13.333" Foreground="Black"/>
    								<ProgressBar Height="25" Value="80" Margin="5"/>
    								<TextBlock Text="130 Go de libre sur 197 Go" Margin="5" FontSize="13.333" Foreground="Gray" TextWrapping="NoWrap"/>
    							</StackPanel>
    						</StackPanel>
    					</Grid>
    			</ListBox.Items>

    I have just a problem with the icon, ok in blend, but nothing at the execution. Why ?

    Friday, November 8, 2013 3:47 PM
  • May be you can write Image source as below

    <Image Source="/AssemblyName;component/icone_hdd_disque.ico" Height="64" Width="64" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="5" />

    Replace "AssemblyName" with assembly name on your project.

    http://msdn.microsoft.com/en-us/library/aa970069(v=vs.110).aspx


    Gaurav Khanna | Microsoft VB.NET MVP | Microsoft Community Contributor

    Friday, November 8, 2013 6:22 PM
  • Hello,

    I try your idea, but it's not working too, sorry.

    I've another problem with the selection of the item :

    The left top corner that I rounded, after selection item is not very beautiful. Any idea to add some "margin" on it ?

    Thank you.

    Saturday, November 9, 2013 10:58 AM
  • Select Image control in designer and set Source property as shown in image

    And you can set Grid's Margin property in ListBox.Items

    <ListBox.Items>
    					<Grid Margin="5,5,0,0">
    						<Grid.ColumnDefinitions>
    							<ColumnDefinition Width="Auto"/>
    						</Grid.ColumnDefinitions>
    						<StackPanel Orientation="Horizontal" Margin="5">
    						<Image Source="icone_hdd_disque.ico" Height="64" Width="64" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="5" />
    							<StackPanel Orientation="Vertical" Grid.Column="1">
    								<TextBlock Text="WINDOWS (C:)" Margin="5" FontSize="13.333" Foreground="Black"/>
    								<ProgressBar Height="25" Value="80" Margin="5"/>
    								<TextBlock Text="130 Go de libre sur 197 Go" Margin="5" FontSize="13.333" Foreground="Gray" TextWrapping="NoWrap"/>
    							</StackPanel>
    						</StackPanel>
    					</Grid>
    			</ListBox.Items>


    Gaurav Khanna | Microsoft VB.NET MVP | Microsoft Community Contributor


    • Edited by Khanna Gaurav Saturday, November 9, 2013 6:55 PM
    • Marked as answer by Yang,Chenfei Wednesday, November 13, 2013 5:48 AM
    Saturday, November 9, 2013 6:47 PM