具有動態調整UserControl大小的WPF XAML數據綁定

Question

我有一個帶有文本框網格的UserControl。 該對象使用框中的文本動態調整其大小。 我需要將此對象的尺寸綁定到我的模型。 綁定UserControl或Grid的'Width'和'Height'會破壞動態調整大小，因為我現在堅持使用模型中聲明的初始大小。 我嘗試使用“ minHeight”和“ minWidth”，但它們不會將數據發送回模型，因為最小尺寸永遠不會改變。 我試圖擺弄不同的模式（單向，雙向等），但是沒有運氣。

總結一下：我需要一種方法來綁定尺寸，同時保持文本框中文本的動態調整大小。

<UserControl x:Class="_02350Demo.View.ClassBoxUserControl"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
         xmlns:cmd="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Platform"
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300"
         Canvas.Left="{Binding X}" Canvas.Top="{Binding Y}"
         Width="{Binding Width}" Height="{Binding Height}">
<UserControl.InputBindings>
    <KeyBinding Modifiers="Control" Key="Z" Command="{Binding UndoCommand}" />
    <KeyBinding Modifiers="Control" Key="Y" Command="{Binding RedoCommand}" />
</UserControl.InputBindings>


<Grid>
    <Rectangle Opacity="{Binding DataContext.ModeOpacity, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}}" StrokeThickness="6" StrokeDashArray="3.1">
        <!-- The fill (background) color of the ellipse is a radial (center to edge) gradient (more than one color) brush. -->
        <Rectangle.Fill>
            <RadialGradientBrush>
                <GradientStop Color="Black" Offset="0.0" />
            </RadialGradientBrush>
        </Rectangle.Fill>


        <i:Interaction.Triggers>
            <i:EventTrigger EventName="MouseDown">
                <cmd:EventToCommand Command="{Binding DataContext.MouseDownShapeCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}}" PassEventArgsToCommand="True"/>
            </i:EventTrigger>
            <i:EventTrigger EventName="MouseMove">
                <cmd:EventToCommand Command="{Binding DataContext.MouseMoveShapeCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}}" PassEventArgsToCommand="True"/>
            </i:EventTrigger>
            <i:EventTrigger EventName="MouseUp">
                <cmd:EventToCommand Command="{Binding DataContext.MouseUpShapeCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}}" PassEventArgsToCommand="True"/>
            </i:EventTrigger>
        </i:Interaction.Triggers>
    </Rectangle>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition />
        </Grid.RowDefinitions>
        <TextBox Text="{Binding ContentClass}"  HorizontalAlignment="Stretch" AcceptsReturn="True" TextWrapping="Wrap" VerticalAlignment="Stretch" Grid.Row="0" BorderThickness="1,1,1,1" BorderBrush="Gray" TextAlignment="Center" Margin="30,0,30,0"/>
        <TextBox Text="{Binding ContentFields}" HorizontalAlignment="Stretch" AcceptsReturn="True" TextWrapping="Wrap" VerticalAlignment="Stretch" Grid.Row="1" BorderThickness="1,1,1,1" BorderBrush="Gray"/>
        <TextBox Text="{Binding ContentMethods}" HorizontalAlignment="Stretch" AcceptsReturn="True" TextWrapping="Wrap" VerticalAlignment="Stretch" Grid.Row="2" BorderThickness="1,1,1,1" BorderBrush="Gray"/>
    </Grid>

</Grid>

Answer 1

如果你只是想您的視圖模型來了解的動態大小UserControl ，你可以處理SizeChanged在事件UserControl ，設置Width和Height您的視圖模型的來源性質ActualWidth和ActualHeight的屬性UserControl分別為：

private void UserControl_SizeChanged(object sender, SizeChangedEventArgs e)
{
    var vm = DataContext as YourViewModel;
    vm.Height = ActualHeight;
    vm.Width = ActualWidth;
}

如果願意，您可以將其包裝為以下行為： https : //www.codeproject.com/Articles/28959/Introduction-to-Attached-Behaviors-in-WPF