locked
Como associar uma coluna no grid com os dados listados no TreeViewItem??? RRS feed

  • Pergunta

  • Beleza, a primeira etapa da criação foi enfileirar os items no TreeViewItem editando header e incluindo um StackPanel.

    Agora preciso associar os items do TreeViewItem com o header da minha tabela. Como faço isso?

     

     

    Grid

    Nome

    Idade

    Sexo

    Telefone

    Foto

     

     

     

    TreeViewItem:

    Fabio

    25

    Masculino

    0000-0000

     

     

     

    Abraço,

    Fabio

    quarta-feira, 3 de dezembro de 2008 15:23

Todas as Respostas

  • Provavelmente, você associou o ItemSource da TreeView a uma lista de clientes.

    Aí é só fazer o binding com os elementos do cliente. No Blend isso é muito fácil, basta editar o template do Header, selecionar os textblocks e ir no ícone ao lado da propriedade text e selecionar data Binding e escolher os dados do cliente

     

    Bruno

     

    quinta-feira, 4 de dezembro de 2008 14:28
  • E o grid com os Titulos, Como associo?

    No .xaml tenho um TreeView  daí a necessidade de criar um Header e no mesmo documento estava procurando solução com o grid criandop uma tabela. Para então poder aplicar o grid no TreeView 

     

    Segue .xaml

     

    <Window
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:Class="UntitledProject3.Window1"
     x:Name="Window"
     Title="Window1"
     Width="640" Height="480" xmlnsBig Smile="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">

     <Window.Resources>
      <Style x:Key="TreeViewItemFocusVisual">
       <Setter Property="Control.Template">
        <Setter.Value>
         <ControlTemplate>
          <Rectangle/>
         </ControlTemplate>
        </Setter.Value>
       </Setter>
      </Style>
      <Style x:Key="ExpandCollapseToggleStyle" TargetType="{x:Type ToggleButton}">
       <Setter Property="Focusable" Value="False"/>
       <Setter Property="Width" Value="19"/>
       <Setter Property="Height" Value="13"/>
       <Setter Property="Template">
        <Setter.Value>
         <ControlTemplate TargetType="{x:Type ToggleButton}">
          <Border Width="Auto" Height="Auto" Background="Transparent" HorizontalAlignment="Center" VerticalAlignment="Center">
           <Border SnapsToDevicePixels="true" Width="Auto" Height="Auto" BorderThickness="1" HorizontalAlignment="Center" VerticalAlignment="Center">
            <Path Margin="1,1,1,1" x:Name="ExpandPath" Fill="{DynamicResource {xTongue Tiedtatic SystemColors.WindowTextBrushKey}}" Data="M 0 2 L 0 3 L 2 3 L 2 5 L 3 5 L 3 3 L 5 3 L 5 2 L 3 2 L 3 0 L 2 0 L 2 2 Z" Stretch="Fill" Height="12" Width="12"/>
           </Border>
          </Border>
          <ControlTemplate.Triggers>
           <Trigger Property="IsChecked" Value="True">
            <Setter Property="Data" TargetName="ExpandPath" Value="M 0 2 L 0 3 L 5 3 L 5 2 Z"/>
            <Setter Property="Height" TargetName="ExpandPath" Value="2"/>
            <Setter Property="Width" TargetName="ExpandPath" Value="12"/>
           </Trigger>
          </ControlTemplate.Triggers>
         </ControlTemplate>
        </Setter.Value>
       </Setter>
      </Style>
      <Style x:Key="TreeViewItemStyleSearchSession" TargetType="{x:Type TreeViewItem}">
       <Setter Property="Background" Value="Transparent"/>
       <Setter Property="HorizontalContentAlignment" Value="{Binding Path=HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
       <Setter Property="VerticalContentAlignment" Value="{Binding Path=VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
       <Setter Property="Padding" Value="1,0,0,0"/>
       <Setter Property="Foreground" Value="{DynamicResource {xTongue Tiedtatic SystemColors.ControlTextBrushKey}}"/>
       <Setter Property="FocusVisualStyle" Value="{StaticResource TreeViewItemFocusVisual}"/>
       <Setter Property="Template">
        <Setter.Value>
         <ControlTemplate TargetType="{x:Type TreeViewItem}">
          <Grid>
           <Grid.ColumnDefinitions>
            <ColumnDefinition MinWidth="19" Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
           </Grid.ColumnDefinitions>
           <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
           </Grid.RowDefinitions>
           <ToggleButton x:Name="Expander" Style="{StaticResource ExpandCollapseToggleStyle}" ClickMode="Press" IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}"/>
           <Border SnapsToDevicePixels="true" x:Name="Bd" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" Grid.Column="1">
            <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" x:Name="PART_Header" ContentSource="Header"/>
           </Border>
           <ItemsPresenter x:Name="ItemsHost" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="1"/>
          </Grid>
          <ControlTemplate.Triggers>
           <Trigger Property="IsExpanded" Value="false">
            <Setter Property="Visibility" TargetName="ItemsHost" Value="Collapsed"/>
           </Trigger>
           <Trigger Property="HasItems" Value="false">
            <Setter Property="Visibility" TargetName="Expander" Value="Hidden"/>
           </Trigger>
           <Trigger Property="IsSelected" Value="true">
            <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {xTongue Tiedtatic SystemColors.HighlightBrushKey}}"/>
            <Setter Property="Foreground" Value="{DynamicResource {xTongue Tiedtatic SystemColors.HighlightTextBrushKey}}"/>
           </Trigger>
           <MultiTrigger>
            <MultiTrigger.Conditions>
             <Condition Property="IsSelected" Value="true"/>
             <Condition Property="IsSelectionActive" Value="false"/>
            </MultiTrigger.Conditions>
            <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {xTongue Tiedtatic SystemColors.ControlBrushKey}}"/>
            <Setter Property="Foreground" Value="{DynamicResource {xTongue Tiedtatic SystemColors.ControlTextBrushKey}}"/>
           </MultiTrigger>
           <Trigger Property="IsEnabled" Value="false">
            <Setter Property="Foreground" Value="{DynamicResource {xTongue Tiedtatic SystemColors.GrayTextBrushKey}}"/>
           </Trigger>
          </ControlTemplate.Triggers>
         </ControlTemplate>
        </Setter.Value>
       </Setter>
      </Style>
      <Style x:Key="TreeViewItemModel" TargetType="{x:Type TreeViewItem}">
       <Setter Property="Background" Value="Transparent"/>
       <Setter Property="HorizontalContentAlignment" Value="{Binding Path=HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
       <Setter Property="VerticalContentAlignment" Value="{Binding Path=VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
       <Setter Property="Padding" Value="1,0,0,0"/>
       <Setter Property="Foreground" Value="{DynamicResource {xTongue Tiedtatic SystemColors.ControlTextBrushKey}}"/>
       <Setter Property="FocusVisualStyle" Value="{StaticResource TreeViewItemFocusVisual}"/>
       <Setter Property="Template">
        <Setter.Value>
         <ControlTemplate TargetType="{x:Type TreeViewItem}">
          <Grid>
           <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
           </Grid.RowDefinitions>
           <Border HorizontalAlignment="Left" Margin="0,0,0,0" VerticalAlignment="Center" Width="30" Height="30" Background="#FFB3CCEE" CornerRadius="3,3,3,3" Grid.ColumnSpan="1" Grid.RowSpan="1" BorderThickness="2,2,2,2" BorderBrush="#FFDADADA"/>
           <ItemsPresenter x:Name="ItemsHost" Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="1" HorizontalAlignment="Left" Width="Auto" d:LayoutOverrides="Width" Margin="0,0,0,0"/>
           <Grid Margin="0,0,0,0" HorizontalAlignment="Stretch">
            <Grid.ColumnDefinitions>
             <ColumnDefinition Width="Auto" MinWidth="30.5"/>
             <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <ToggleButton Margin="0,0,0,0" x:Name="Expander" Style="{StaticResource ExpandCollapseToggleStyle}" ClickMode="Press" IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}" HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" Height="Auto" d:LayoutOverrides="Width"/>
            <Border Grid.ColumnSpan="2" Grid.Column="1" Background="#FFB3CCEE" CornerRadius="10,10,10,10" BorderThickness="2,2,2,2" BorderBrush="#FFDADADA" Margin="5,0,0,0">
             <StackPanel Width="Auto" Orientation="Horizontal" Height="Auto">
              <TextBlock Height="Auto" TextWrapping="Wrap" HorizontalAlignment="Center" x:Name="Id" VerticalAlignment="Center" Margin="10,0,0,0"><Run Language="pt-br" Text="010250450"/></TextBlock>
              <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Height="Auto" TextWrapping="Wrap" Margin="5,0,0,0"><Run Language="pt-br" Text="27/12/2008"/></TextBlock>
              <TextBlock Height="Auto" TextWrapping="Wrap" HorizontalAlignment="Center" Margin="10,0,0,0" VerticalAlignment="Center"><Run Language="pt-br" Text="15:30"/></TextBlock>
              <TextBlock Height="Auto" TextWrapping="Wrap" HorizontalAlignment="Center" Margin="5,0,0,0" VerticalAlignment="Center"><Run Language="pt-br" Text="58 min"/></TextBlock>
              <TextBlock Height="Auto" TextWrapping="Wrap" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5,0,0,0"><Run Language="pt-br" Text="100"/></TextBlock>
              <TextBlock Height="Auto" TextWrapping="Wrap" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5,0,0,0"><Run Language="pt-br" Text="Fabio Fernandes Cardoso"/></TextBlock>
              <Image Margin="10,0,0,0" Width="20" Source="icoAlmoco.png" Stretch="Uniform"/>
              <Image Margin="10,0,0,0" Width="20" Source="icoAudio.png" Stretch="Uniform" Height="33.277"/>
              <Image Margin="10,0,0,0" Width="20" Source="icoSessaoConfSimples.png" Stretch="Uniform" Height="33.277"/>
              <Image Margin="10,0,0,0" Width="20" Source="icoAlmoco1.png" Stretch="Uniform"/>
              <Image Margin="10,0,0,0" Width="20" Source="icoAudio1.png" Stretch="Uniform" Height="33.277"/>
              <Image Margin="10,0,0,0" Width="20" Source="icoSessaoConfSimples1.png" Stretch="Uniform" Height="33.277"/>         
             </StackPanel>
            </Border>
           </Grid>
          </Grid>
          <ControlTemplate.Triggers>
           <Trigger Property="IsExpanded" Value="false">
            <Setter Property="Visibility" TargetName="ItemsHost" Value="Collapsed"/>
           </Trigger>
           <Trigger Property="HasItems" Value="false">
            <Setter Property="Visibility" TargetName="Expander" Value="Hidden"/>
           </Trigger>
           <Trigger Property="IsSelected" Value="true">
            <Setter Property="Foreground" Value="{DynamicResource {xTongue Tiedtatic SystemColors.HighlightTextBrushKey}}"/>
           </Trigger>
           <MultiTrigger>
            <MultiTrigger.Conditions>
             <Condition Property="IsSelected" Value="true"/>
             <Condition Property="IsSelectionActive" Value="false"/>
            </MultiTrigger.Conditions>
            <Setter Property="Foreground" Value="{DynamicResource {xTongue Tiedtatic SystemColors.ControlTextBrushKey}}"/>
           </MultiTrigger>
           <Trigger Property="IsEnabled" Value="false">
            <Setter Property="Foreground" Value="{DynamicResource {xTongue Tiedtatic SystemColors.GrayTextBrushKey}}"/>
           </Trigger>
          </ControlTemplate.Triggers>
         </ControlTemplate>
        </Setter.Value>
       </Setter>
      </Style>
     </Window.Resources>

     <Grid x:Name="LayoutRoot">
      <ScrollViewer HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" Height="100">
       <Grid>
        <Grid.Resources>
         <Style TargetType="{x:Type TextBlock}">
          <Setter Property="Margin" Value="5,3" />
         </Style>
        </Grid.Resources>
        <Grid.ColumnDefinitions>
         <ColumnDefinition Width="*" />
         <ColumnDefinition Width="Auto" />
         <ColumnDefinition Width="Auto" />
         <ColumnDefinition Width="*" />
         <ColumnDefinition Width="Auto" />
         <ColumnDefinition Width="Auto" />
         <ColumnDefinition Width="*" />
         <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
         <RowDefinition Height="Auto" />
         <RowDefinition Height="Auto" />
         <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        
        <Border Grid.Column="0" Grid.Row="0"
          Background="LightGray" BorderBrush="Gray"
          BorderThickness="1">
         <TextBlock>ID</TextBlock>
        </Border>
        <Border Grid.Column="1" Grid.Row="0"
          Background="LightGray" BorderBrush="Gray"
          BorderThickness="1">
         <TextBlock>Data</TextBlock>
        </Border>
        <Border Grid.Column="2" Grid.Row="0"
          Background="LightGray" BorderBrush="Gray"
          BorderThickness="1">
         <TextBlock>Hora</TextBlock>
        </Border>
        <Border Grid.Column="3" Grid.Row="0"
          Background="LightGray" BorderBrush="Gray"
          BorderThickness="1">
         <TextBlock>Nº</TextBlock>
        </Border>
        <Border Grid.Column="4" Grid.Row="0"
          Background="LightGray" BorderBrush="Gray"
          BorderThickness="1">
         <TextBlock>Participantes</TextBlock>
        </Border>
        <Border Grid.Column="5" Grid.Row="0"
          Background="LightGray" BorderBrush="Gray"
          BorderThickness="1">
         <TextBlock>Status</TextBlock>
        </Border>
        <Border Grid.Column="6" Grid.Row="0"
          Background="LightGray" BorderBrush="Gray"
          BorderThickness="1">
         <TextBlock>Midia</TextBlock>
        </Border>
        <Border Grid.Column="7" Grid.Row="0"
          Background="LightGray" BorderBrush="Gray"
          BorderThickness="1">
         <TextBlock>Sessao</TextBlock>
        </Border>
        <TextBlock Grid.Column="0" Grid.Row="1" Text="Programming WPF" />
        <TextBlock Grid.Column="1" Grid.Row="1" Text="O'Reilly Media, Inc." />
        <TextBlock Grid.Column="2" Grid.Row="1" Text="1" />
        <TextBlock Grid.Column="3" Grid.Row="1" Text="Programming WPF" />
        <TextBlock Grid.Column="4" Grid.Row="1" Text="O'Reilly Media, Inc." />
        <TextBlock Grid.Column="5" Grid.Row="1" Text="1" />
        <TextBlock Grid.Column="6" Grid.Row="1" Text="Programming WPF" />
        <TextBlock Grid.Column="7" Grid.Row="1" Text="O'Reilly Media, Inc." />
        
        <TextBlock Grid.Column="0" Grid.Row="2" Text="IanG" />
        <TextBlock Grid.Column="1" Grid.Row="2" Text="The Internet" />
        <TextBlock Grid.Column="2" Grid.Row="2" Text="2" />
        <TextBlock Grid.Column="3" Grid.Row="2" Text="IanG" />
        <TextBlock Grid.Column="4" Grid.Row="2" Text="The Internet" />
        <TextBlock Grid.Column="5" Grid.Row="2" Text="2" />
        <TextBlock Grid.Column="6" Grid.Row="2" Text="IanG" />
        <TextBlock Grid.Column="7" Grid.Row="2" Text="The Internet" />
        

       </Grid>
      </ScrollViewer>
      <TreeView Width="Auto" Height="87.107" Margin="0,0,50.25,0" VerticalAlignment="Top">
       <Border Background="#00B3CCEE" Margin="-20,0,0,0" Width="Auto" Height="Auto" BorderThickness="2,2,2,2" CornerRadius="10,10,10,10">
        <TreeViewItem Style="{DynamicResource TreeViewItemModel}" Width="Auto" Height="Auto" Header="TreeViewItem">
         <TreeViewItem Header="TreeViewItem" Margin="30,0,0,0" HorizontalAlignment="Left" Style="{DynamicResource TreeViewItemStyleSearchSession}"/>
        </TreeViewItem>
       </Border>
       <TreeViewItem Header="TreeViewItem" IsExpanded="True">
        <TreeViewItem Header="TreeViewItem"/>
       </TreeViewItem>
      </TreeView>   
     </Grid>
     
    </Window>

    quinta-feira, 4 de dezembro de 2008 14:32
  • O que você quer já existe num dos exemplos do WPF. Dê uma olhada em http://msdn.microsoft.com/de-de/library/ms771523(VS.85).aspx

     

    Bruno

    sexta-feira, 5 de dezembro de 2008 09:12
  • Muito obrigado pelo arquivo. Como havia falado anteriormente, Eu trabalho mais com o Blend. Já vi que o copiar e colar não funcionou devido as resources. O que devo fazer para colocar o exemplo no blend sem ter que abrir o VIsual Studio, isso é possivel?

    Enquanto isso, vou me virando aqui.

    Obrigado,

    Fabio

     

    sexta-feira, 5 de dezembro de 2008 12:33
  • Você pode abrir o csproj do exemplo no Blend sem problemas: descompacte o exemplo, e abra o projeto no Blend.

     

    Bruno

     

    sábado, 6 de dezembro de 2008 07:57
  • Eu já fiz isso, mas agora quero pegar o exemplo inclui-lo no meu projeto. Não consigo.

    Outra coisa, queria carregar um arquivo externo no treeView. No momento estou apenas alternando os dados das colunas (IsAbstract, Namespace).

    Abraço,

    Fabio 

     

    segunda-feira, 8 de dezembro de 2008 14:18
  • Acredito que você esteja precisando ir um pouco além. Me parece que você, como designer, está sozinho na empreitada de desenvolvimento. Se não tiver nenhum desenvolvedor para lhe ajudar, acredito que terá que estudar um pouco do uso do Visual Studio para o desenvolvimento, para se tornar um "deviner" (developer + designer).

    Para carregar os dados externos na treeview, você deve usar o data binding. Dê uma olhada em meus artigos no MSDN, eles dão uma introdução ao WPF

    terça-feira, 9 de dezembro de 2008 11:13