2016-07-04 6 views
1

Bitte sehen Sie sich das Bild unten an. Dies ist eine Window, wo ich mehrere TextBlock s innerhalb einer Grid platziert habe. Es ist eigentlich das Marketing-Team, das mich gezwungen hat, die Benutzeroberfläche so zu gestalten. Aber ich bin vor anderen Themen wieWie bindet man einen TextBlock-Wert mit einem anderen TextBlocks-Wert? Im selben Fenster?

I-Code haben die XAML wie dies, wie ich kann nur die UI-Design erreichen, wenn ich die TextBlocks auf diese Weise platzieren.

<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> 

Nun ist die Frage: Wie kann ich den Wert des BlueTextBlock mit einem der Wert des textBlocks innerhalb des Grid binden.

Nehmen wir an, ich habe den textBlock mit text = "Value 2" ausgewählt, dann sollte der BlueTextBlock Text auch Value 2 sein.

Wie kann ich das erreichen? Hier

+0

Normalerweise haben Sie eine Eigenschaft in Ansichtsmodell, an die beide 'TextBox' und' TextBlock' haben ihre 'Text' Eigenschaft gebunden. Sie sprechen jedoch von Fokus (ausgewählt?) Und binden an ausgewählten Artikel. Verwenden Sie dann 'ItemsControl' (oder' ListBox'), weil sie 'SelectedItem' -Eigenschaft haben, an die Sie Ihren' TextBox.Text' binden können (eigentlich ist es wieder besser, eine Eigenschaft in ViewModel zu haben, die 'SelectedItem' ViewModel zu' Text 'Eigenschaft, die Sie binden). – Sinatr

+0

Ja, ich kann, ich stimme dem zu, aber wenn ich das tue, wie kann ich diese ListBox-Elemente auf diese Weise platzieren? Für mich sollte die Benutzeroberfläche so sein, dass ich jede Art von Implementierung haben kann. :) ListBox-Elemente Kontrollelemente, die ich an eine Eigenschaft in ViewModel binden kann. Aber wie gestalte ich diese Benutzeroberfläche mit ListBox oder ListView? – Debhere

+1

Um Layout wie auf Bild zu haben, verwenden Sie 'UniformGrid' als' ListBox.ItemsPanel', sehen Sie [diese Frage] (http://stackoverflow.com/q/21611004/1997232). Oder besser [diese nette Antwort] (http://stackoverflow.com/a/9559183/1997232) (es erstellt 2 Spalten, Sie brauchen 3). – Sinatr

Antwort

2

ist die Komplettlösung zu dem, was Sie brauchen ... sehr einfach zu haben, dass die Auswahl ausgewähltes Element Stil entfernt man kann überschreibt die 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> 

The result

zunächst einen Textblock nicht ist wählbar ... Wenn Sie eine Steuerung haben, die zum Beispiel eine Combobox

ausgewählt werden kann, können Sie etwas von den folgenden

tun

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}"/> 

Noch mehr Beispiele

<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> 
+0

Aber ComboBox wird das UI-Design-Problem nicht lösen. Es ist die Ui, die wichtiger ist. Andernfalls kann dasselbe Feature mit ListBox- und Eigenschaftenbindung an ausgewählte ListBox-Elemente implementiert werden. Aber ich bin wirklich ein Durcheinander mit dem UI-Design. – Debhere

+1

Dies kann auch mit einem 'GridView' gemacht werden, aber das Auswählen eines fokussierbaren Elements funktioniert nicht ohne Code dahinter ... also keine Bindung an diesem Punkt. –

+0

@Debhere PLZ als Antwort auf die Arbeit ... –

Verwandte Themen