Question

I have been using ItemsControl for quiet sometime in WPF. I am using MVVM for developing my application.

Now I have run into a problem. I have a requirement where in based on number of values in a IList<> , I have to display the number of TextBoxes separated by a comma in between. I have written an ItemsControl which iterates over the bound IList<> and displays the TextBoxes based on number of elements.

I have written a DataTemplate like this

<DataTemplate x:Key="ParameterDisplay1">  
    <ItemsControl ItemsSource="{Binding Parameters}">  
        <ItemsControl.ItemsPanel>  
            <ItemsPanelTemplate>  
                <StackPanel Orientation="Horizontal"></StackPanel>  
            </ItemsPanelTemplate>  
        </ItemsControl.ItemsPanel>  
        <ItemsControl.ItemTemplate>  
            <DataTemplate>  
                <StackPanel Orientation="Horizontal" >  
                    <TextBox  Width="40" Height="auto" Margin="2" Text="{Binding ProcessData}"></TextBox>  
                    <TextBlock Text=" , " Width="auto" Height="auto" Margin="2" FontSize="15"></TextBlock>  
                </StackPanel>  
            </DataTemplate>  
        </ItemsControl.ItemTemplate>  
     </ItemsControl>  
</DataTemplate>  

And I am using it like this :

<dg:DataGrid x:Name="DataGrid_Standard" toGenerateColumns="False">
    <dg:DataGrid.Columns>  
        <dg:DataGridTemplateColumn Header="Parameters" Width="SizeToCells" IsReadOnly="True"  
            CellTemplateSelector="{StaticResource paramTemplateSelector}">
        </dg:DataGridTemplateColumn> 
    </dg:DataGrid.Columns>  
</dg:DataGrid>  

But the problem is, I have to display “(“ before the first TextBox and a “)” after the last TextBox and “,” in between the TextBoxes.
I have to display something like this ::::>    ** ( TextBox , TextBox , TextBox ) **

Achieving this using codebehind is easy, but I dont want to write anything in my codebehind file and I want my View to be clean. I want to write everything in XAML file only A sample illustration regarding how to do this will be of great help!!

Answer 1

Wrap the ItemsControl with some sort of control that puts the parenthesis at either side (perhaps a dock panel).

Then, put a comma in the item template that displays before the item. Use a data trigger with relative source of type ‘previous data’ such that when the previous item is null, you hide the comma (that way you won’t see the comma for the first item).

EDIT

Here’s some code that shows what I mean. I don’t have your data types or grid component, so it might not be quite right. It highlights the technique I mentioned, however.

<DataTemplate x:Key="ParameterDisplay1">
  <StackPanel Orientation="Horizontal">
    <TextBlock>(</TextBlock>
    <ItemsControl ItemsSource="{Binding Parameters}">
      <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
          <StackPanel Orientation="Horizontal"></StackPanel>
        </ItemsPanelTemplate>
      </ItemsControl.ItemsPanel>
      <ItemsControl.ItemTemplate>
        <DataTemplate>
          <StackPanel Orientation="Horizontal" >
            <TextBlock Text=", " Name="Comma"></TextBlock>
            <TextBox Width="40" Text="{Binding ProcessData}"></TextBox>
          </StackPanel>
          <!-- Make a trigger that hides the comma for the first item -->
          <DataTemplate.Triggers>
            <DataTrigger Binding="{Binding RelativeSource={RelativeSource PreviousData}}" Value="{x:Null}">
              <Setter TargetName="Comma" Property="Visibility" Value="Collapsed" />
            </DataTrigger>
          </DataTemplate.Triggers>
        </DataTemplate>
      </ItemsControl.ItemTemplate>
    </ItemsControl>
    <TextBlock>)</TextBlock>
  </StackPanel>
</DataTemplate>