CODEWITHSUNDEEP
c#wpfxaml
Nivert9
Nivert9

Reputation: 37

WPF basic binding

I know this has been asked quite a few times, but no matter how many tutorials I read, I simply cannot understand it. I have a grid with three ColumnDefinitions that can be resized via two GridSplitters. What I want is another grid below it with three ColumnDefinitions that resize as the top grid is being resized (much alike the UI in a program like iTunes). The reason I want separate grids is because eventually, each grid will be its own object and will need drag and drop properties. Here is the Xaml I have written if anyone wants to see what I'm looking at.

<Canvas Width="400" Height="15" Background="AntiqueWhite">
        <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="400" Name='Maingrid'>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="140" MinWidth="50"/>
                <ColumnDefinition Width="116" MinWidth="50"/>
                <ColumnDefinition Width="144" MinWidth="50"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="15"/>
            </Grid.RowDefinitions>
            <GridSplitter Grid.Column="0"
          HorizontalAlignment="Right"
          VerticalAlignment="Stretch"
          Background="Black" 
          ShowsPreview="True"
          Width="2"
          />
            <GridSplitter Grid.Column="1"
          HorizontalAlignment="Right"
          VerticalAlignment="Stretch"
          Background="Black" 
          ShowsPreview="True"
          Width="2"
          />
            <TextBlock Text="Song" Grid.Column="0" Width="30"/>
            <TextBlock Text="Song" Grid.Column="1" Width="30"/>
            <TextBlock Text="Song" Grid.Column="2" Width="30"/>
        </Grid>
    </Canvas>

    <Canvas Width="400" Height="15" Background="RosyBrown" Margin="58,168,59,138">
        <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="400">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="140" MinWidth="50"/>
                <ColumnDefinition Width="116" MinWidth="50"/>
                <ColumnDefinition Width="144" MinWidth="50"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="15"/>
            </Grid.RowDefinitions>
            <TextBlock Text="Song" Grid.Column="0" Width="30"/>
            <TextBlock Text="Song" Grid.Column="1" Width="30"/>
            <TextBlock Text="Song" Grid.Column="2" Width="30"/>
        </Grid>
    </Canvas>

Also as a final note, I've looked at endless amounts of tutorials and guides on data binding and my 17 year old brain just can't seem to wrap my head around it. If I could understand how to make a textblock be bound to a variable in my C# codebehind (aka: not setting the textblock's text property in the codebehind, but simply changing the contents of a string), I'd be able to be so much more productive. Thank you to anyone who can help me, I know this question has been asked a million times.

Upvotes: 0

Views: 85

Answers (2)

user2509848
user2509848

Reputation:

This is a way to do it without code behind. Just give your first column definitions names, then bind the lower column definitions widths' to the width of the appropriate column definitions in the first grid. Clean and simple, no code behind to mess with:

<Canvas Width="400" Height="15" Background="AntiqueWhite">
    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="400" Name='Maingrid'>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Name="Grid1Col1" Width="140" MinWidth="50"/>
            <ColumnDefinition Name="Grid1Col2" Width="116" MinWidth="50"/>
            <ColumnDefinition Name="Grid1Col3" Width="144" MinWidth="50"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="15"/>
        </Grid.RowDefinitions>
        <GridSplitter Grid.Column="0"
      HorizontalAlignment="Right"
      VerticalAlignment="Stretch"
      Background="Black" 
      ShowsPreview="True"
      Width="2"
      />
        <GridSplitter Grid.Column="1"
      HorizontalAlignment="Right"
      VerticalAlignment="Stretch"
      Background="Black" 
      ShowsPreview="True"
      Width="2"
      />
        <TextBlock Text="Song" Grid.Column="0" Width="30"/>
        <TextBlock Text="Song" Grid.Column="1" Width="30"/>
        <TextBlock Text="Song" Grid.Column="2" Width="30"/>
    </Grid>
</Canvas>

<Canvas Width="400" Height="15" Background="RosyBrown" Margin="58,168,59,138">
    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="400">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="{Binding Width, ElementName=Grid1Col1}" MinWidth="50"/>
            <ColumnDefinition Width="{Binding Width, ElementName=Grid1Col1}" MinWidth="50"/>
            <ColumnDefinition Width="{Binding Width, ElementName=Grid1Col1}" MinWidth="50"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="15"/>
        </Grid.RowDefinitions>
        <TextBlock Text="Song" Grid.Column="0" Width="30"/>
        <TextBlock Text="Song" Grid.Column="1" Width="30"/>
        <TextBlock Text="Song" Grid.Column="2" Width="30"/>
    </Grid>
</Canvas>

Upvotes: 0

paul
paul

Reputation: 22001

In your c# codebehind, create a property:

private string _songTitle;
public string SongTitle { get { return _songTitle; } set { songTitle = value; } }

In your xaml, create a binding:

<TextBlock Text="{Binding SongTitle}" />

Set the DataContext for your binding (you could put this in the Window.Loaded event)

this.DataContext = this;

Set your property in your code

SongTitle = "Some words and stuff";

That's about it. It can get more complicated, but that's the basics.

Upvotes: 1

Related Questions