How to Bind a textBlock's value with another TextBlocks value In the same window?

Question

Please look into the picture below. This is one Window where I have placed multiple TextBlocks inside a Grid. Its actually the marketing team that compelled me to design the UI like this. But I am facing other issues like

I have code the XAML like this as I can only achieve the UI design if I place the TextBlocks in this way.

 <TextBlock x:Name="BlueTextBlock"
          Margin="100,10,0,0"
          Foreground="Blue"
          Text="{Binding ElementName=GridAlltextBlocks, Path=???   Mode=TwoWay}"/> 

 <Grid x:Name="GridAlltextBlocks">        
     <Grid.RowDefinitions>
          <RowDefinition Height="40" />
          <RowDefinition Height="40" />
          <RowDefinition Height="40" />
          <RowDefinition Height="40" />                          
     </Grid.RowDefinitions>

     <Grid.ColumnDefinitions>
          <ColumnDefinition Width="*" />
          <ColumnDefinition Width="*" />
          <ColumnDefinition Width="*" />
     </Grid.ColumnDefinitions>

     <TextBlock Grid.Row="0" Grid.Column="0" Focusable="True" Text="Value 1"/>
     <TextBlock Grid.Row="1" Grid.Column="0" Focusable="True" Text="Value 6"/>
     <TextBlock Grid.Row="2" Grid.Column="1" Focusable="True" Text="Value 2"/>
     <TextBlock Grid.Row="3" Grid.Column="3" Focusable="True" Text="Value 3"/>
     <TextBlock Grid.Row="1" Grid.Column="1" Focusable="True" Text="Value 4"/>
     <TextBlock Grid.Row="2" Grid.Column="3" Focusable="True" Text="Value 5"/>
 </Grid>

Now the question is: How I bind the value of the BlueTextBlock with one of the value of the textBlocks inside the Grid.

Lets say I have selected the textBlock having text="Value 2" then the BlueTextBlock text should also be Value 2.

how can I achieve this?

Normally you will have a property in ViewModel to which both `TextBox` and `TextBlock` have their `Text` property bound. However, you are talking about focus (selected?) and binding to selected item. Then rather use `ItemsControl` (or `ListBox`) because they have `SelectedItem` property to which you can bind your `TextBox.Text` (actually it's again better to have property in ViewModel, which hold `SelectedItem` ViewModel to which `Text` property you are binding). — Sinatr, Jul 04 '16 at 13:31
Yes i can, I agree to that but if I do that how can i place that ListBox items in this fashion? For me the UI should be like this I can have any type of implementation. :) ListBox items Control items I can bind to some property in ViewModel. But How do i design this UI using ListBox or ListView? — Debhere, Jul 04 '16 at 13:33
To have layout as on picture use `UniformGrid` as `ListBox.ItemsPanel`, see [this question](http://stackoverflow.com/q/21611004/1997232). Or better [this nice answer](http://stackoverflow.com/a/9559183/1997232) (it creates 2 columns, you need 3). — Sinatr, Jul 04 '16 at 13:33
Thanks for this answer, will look into this and will update here. — Debhere, Jul 04 '16 at 13:39

Jordy van Eijk · Answer 1 · 2016-07-05T10:49:18.513

Here is the complete solution to what you need... very easy too have that selection selected item style removed you could override the ListView.ItemContainerStyle

<Window x:Class="WpfApplication1.GridView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfApplication1"
    mc:Ignorable="d"
    Title="ListView" Height="600" Width="800">
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="3"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <TextBlock Foreground="Blue" Height="45" Grid.Row="0" Margin="10" Text="{Binding ElementName=ListView, Path=SelectedItem}" FontSize="20"/>
    <Rectangle Grid.Row="1" Fill="Gray" Margin="10 0"/>
    <ListView x:Name="ListView"  Grid.Row="2" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ItemsSource="{Binding Items}" Foreground="Green" FontSize="20" Grid.IsSharedSizeScope="True" BorderThickness="0">
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition SharedSizeGroup="Group" Width="150"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock Text="{Binding}" FontSize="20" Foreground="Green" HorizontalAlignment="Center"/>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
    </ListView>
</Grid>
</Window>

first of all a TextBlock is not selectable... If you have some control that can be selected for instance a combobox

you can do something of the following

Text="{Binding ElementName=ComboBoxName, Path=SelectedItem.Property}"

<TextBlock Text="{Binding ElementName=box1, Path=SelectedItem.Property}" Height="20"/>
    <ComboBox Name="box1" Height="30" Margin="30" ItemsSource="{Binding Items}"/>

Even more examples

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <TextBlock Text="{Binding ElementName=box1, Path=SelectedItem}" Height="20"/>
    <ListView Name="box1" ItemsSource="{Binding Items}" Grid.Row="1">
        <ListView.View>
            <GridView>
                <GridViewColumn Header="Name" Width="120" DisplayMemberBinding="{Binding}"/>
            </GridView>
        </ListView.View>
    </ListView>
</Grid>

But ComboBox is not going to solve the UI design issue. Its the Ui that's more important. Otherwise the same feature can be implemented with a ListBox and property bind to ListBox items selected. But I am actually a mess with the UI design. — Debhere, Jul 04 '16 at 13:28
this can also be done by a `GridView` but simply selecting a focusable element is not gonna work without some code behind... so no binding at that point. — Jordy van Eijk, Jul 04 '16 at 13:32

How to Bind a textBlock's value with another TextBlocks value In the same window?

1 Answers1