开发者

WPF bind control width to ListBox column width

开发者 https://www.devze.com 2023-03-22 06:33 出处:网络
I wrote XAML as follows: <UserControl.Resources> <GridViewColumnCollection x:Key=\"gvcc\"> <GridViewColumn Header=\"Klient\"

I wrote XAML as follows:

<UserControl.Resources>

    <GridViewColumnCollection x:Key="gvcc">
        <GridViewColumn Header="Klient"
                  DisplayMemberBinding="{Binding CustomerName}"
                  Width="80">
        </GridViewColumn>
        <GridViewColumn Header="Budżet"
                  DisplayMemberBinding="{Binding Budget, StringFormat={}{0:C}}"
                  Width="80">
        </GridViewColumn>
        <GridViewColumn Header="Zysk. zakł."
                  DisplayMemberBinding="{Binding ExpectedProfability, StringFormat={}{0:C}}"
                  Width="80">
        </GridViewColumn>
        <GridViewColumn Header="Zysk. real."
                  DisplayMemberBinding="{Binding RealProfability, StringFormat={}{0:C}}"
                  Width="80">
        </GridViewColumn>
        <GridViewColumn Header="Miejsce"
                  DisplayMemberBinding="{Binding Place}"
                  Width="80" />
        <GridViewColumn Header="Nr proj."
                  DisplayMemberBinding="{Binding Number}"
                  Width="80">
        </GridViewColumn>

    </GridViewColumnCollection>

</UserControl.Resources>

...

<Grid>
        <ScrollViewer ScrollViewer.VerticalScrollBarVisibility="Visible">
            <ItemsControl ItemsSource="{Binding GroupedProjects}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition />
                                <RowDefinition />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="70" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>

                            <Border Grid.Column="0" Grid.Row="0" Grid.RowSpan="3" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Background="Red" >
                                <TextBlock FontSize="13" Text="{Binding Month}" TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center" />
                            </Border>

                            <GridViewHeaderRowPresenter Name="hrp" Columns="{StaticResource gvcc}" Grid.Column="1" Grid.Row="0" />
                            <ListBox ItemsSource="{Binding Details}" Grid.Column="1" Grid.Row="1" ScrollViewer.VerticalScrollBarVisibility="Disabled"
                                     GotFocus="ListBox_GotFocus"
                                     PreviewMouseWheel="ListBox_PreviewMouseWheel"
                                     SelectedItem="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}, Path=DataContext.SelectedProject}">
                                <ListBox.ItemTemplate>
                                    <DataTemplate>
                                        <GridViewRowPresenter Columns="{StaticResource gvcc}" Height="24" />
                                    </DataTemplate>
                                </ListBox.ItemTemplate>
                            </ListBox>
<!-- HERE IS THE PROBLEM -->
                        </Grid>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Vertical"/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
            </ItemsControl>
        </ScrollViewer>
    </Grid>

Data are grouped in the ListBox, underneath the ListBox I want to display something like a summary row. I wanted to do thi开发者_StackOverflow社区s row as the StackPanel with TextBlock controls. The problem is - how to relate the width of the TextBox controls with the widths of columns in the ListBox.

Let's say the "summary row" is something like that:

<StackPanel Orientation="Horizontal">
<TextBlock Width="bind to ListBox.Column1.Width + ListBox.Column2.Width">some data</TextBlock>
<TextBlock Width="bind to ListBox.Column3.Width">other data</TextBlock>
<TextBlock Width="bind to ListBox.Column4.Width">etc.</TextBlock>
</StackPanel>

As you can see - first TextBlock width is something like "ColumnSpan = 2". The width of the other TextBlocks is simply the width of a column to which I would like to pair them.

Is such a thing is even possible in XAML? Can anyone of you knows how to implement a similar solution in different way?


If you are doing this through MVVM, you can easily use property binding to get it done. Just set the width of each of the ListBox columns to properties in your ViewModel. The textBox controls widths will be bound to a seperate readonly property which takes the appropriate widths, manipulates them in some way, and returns a value. You will have to implement INotifyPropertyChanged and call it on each of the textbox width properties every time a listboxwidth property is changed.

So something like so:

Private _Column1Width As Double
Public Property Column1Width() As Double
    Get
        Return _Column1Width
    End Get
    Set(ByVal value As Double)
        _Column1Width = value
        OnPropertyChanged("TextBox1Width")
    End Set
End Property

Private _Column2Width As Double
Public Property Column2Width() As Double
    Get
        Return _Column2Width
    End Get
    Set(ByVal value As Double)
        _Column2Width = value
        OnPropertyChanged("TextBox1Width")
    End Set
End Property

Public ReadOnly Property TextBox1Width() As Double
    Get
        Return Column1Width + (Column2Width * 2)
    End Get
End Property

And bindings like so:

    <GridViewColumnCollection x:Key="gvcc">
        <GridViewColumn Header="Klient"
                  DisplayMemberBinding="{Binding CustomerName}"
                  Width="{Binding Column1Width, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"}">
        </GridViewColumn>
        <GridViewColumn Header="Budżet"
                  DisplayMemberBinding="{Binding Budget, StringFormat={}{0:C}}"
                  Width="{Binding Column2Width, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
        </GridViewColumn>
        <GridViewColumn Header="Zysk. zakł."
                  DisplayMemberBinding="{Binding ExpectedProfability, StringFormat={}{0:C}}"
                  Width="80">
        </GridViewColumn>
        <GridViewColumn Header="Zysk. real."
                  DisplayMemberBinding="{Binding RealProfability, StringFormat={}{0:C}}"
                  Width="80">
        </GridViewColumn>
        <GridViewColumn Header="Miejsce"
                  DisplayMemberBinding="{Binding Place}"
                  Width="80" />
        <GridViewColumn Header="Nr proj."
                  DisplayMemberBinding="{Binding Number}"
                  Width="80">
        </GridViewColumn>
    </GridViewColumnCollection>

<TextBlock Width="{Binding TextBox1Width}">some data</TextBlock>

Everything resizes just as it should continuously updating as you resize the columns.

0

精彩评论

暂无评论...
验证码 换一张
取 消