通过更改 window 或文档面板的大小来调整我的用户控件内容的大小

Question

我有几个点击按钮，它们显示带有图像的用户控件。当我调整其中任何一个的大小时，图像开始隐藏。但我希望它们随着调整大小而扩大和缩小。请告诉我如何实现。

OtherPanelView.xaml

  <UserControl x:Class="DXDockingMVVMTest1.Views.OtherPanelView"
                 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" 
                 mc:Ignorable="d" 
                 d:DesignHeight="300" d:DesignWidth="300" Background="Orange">
        <Grid>
                 <Image HorizontalAlignment="Left" Height="23" Margin="96,104,0,0" TextWrapping="Wrap" Source="{Binding Image}" VerticalAlignment="Top" Width="120"/>
        </Grid>
    </UserControl>

PanelView.xaml

 <UserControl x:Class="DXDockingMVVMTest1.Views.PanelView"
                 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" 
                 mc:Ignorable="d" 
                 d:DesignHeight="300" d:DesignWidth="300" Background="#FF47DAB4">
        <Grid>
            <Image HorizontalAlignment="Left" Height="23" Margin="96,104,0,0" TextWrapping="Wrap" Source="{Binding Image}" VerticalAlignment="Top" Width="120"/>

        </Grid>
    </UserControl>

MainView.xaml

   <Window x:Class="DXDockingMVVMTest1.Views.MainView"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:dxb="http://schemas.devexpress.com/winfx/2008/xaml/bars" 
            xmlns:dxd="http://schemas.devexpress.com/winfx/2008/xaml/docking"
            xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
            xmlns:ViewModels="clr-namespace:DXDockingMVVMTest1.ViewModels"
            xmlns:Views="clr-namespace:DXDockingMVVMTest1.Views" Title="Main Window" Height="400" Width="800">
        <Window.Resources>

            <!--<Views:Conv x:Key="conv"/>-->

            <DataTemplate DataType="{x:Type ViewModels:PanelViewModel}">
                <Views:PanelView />
            </DataTemplate>

            <DataTemplate DataType="{x:Type ViewModels:OtherPanelViewModel}">
                <Views:OtherPanelView/>
            </DataTemplate>

            <Style TargetType="dxd:DocumentPanel">            
                <Setter Property="Caption" Value="{Binding Caption}" />
                <Setter Property="Views:Helper.Name" Value="{Binding Caption}"/>
                <Setter Property="AllowFloat" Value="{Binding CanFloat}"/>
            </Style>
        </Window.Resources>

        <dxb:BarManager>

            <dxb:BarManager.Categories>
                <dxb:BarManagerCategory Name="File" />
            </dxb:BarManager.Categories>
            <dxb:BarManager.Items>
                <dxb:BarButtonItem Name="bNew" CategoryName="File" Content="Add Panel"  KeyGesture="Ctrl+N" Hint="" Command="{Binding AddPanelCommand}"/>
                <dxb:BarButtonItem Name="bOpen" CategoryName="File" Content="Add Other Panel"  KeyGesture="Ctrl+O" Hint="Open" Command="{Binding AddOtherPanelCommand}"/>
                <dxb:BarButtonItem Name="bSave" CategoryName="File" Content="Save"  KeyGesture="Ctrl+S" Hint="Save Document" ItemClick="OnSaveLayout" />
                <dxb:BarButtonItem Name="bExit" CategoryName="File" Content="Restore" KeyGesture="Ctrl+X"  ItemClick="OnRestoreLayout"/>
            </dxb:BarManager.Items>
            <dxb:BarManager.Bars>
                <dxb:Bar Caption="Panel1Bar" x:Name="Bar1" UseWholeRow="True" ShowDragWidget="False" AllowQuickCustomization="False">
                    <dxb:Bar.DockInfo>
                        <dxb:BarDockInfo ContainerName="panel1DockControl" />
                    </dxb:Bar.DockInfo>
                    <dxb:Bar.ItemLinks>
                        <dxb:BarButtonItemLink BarItemName="bNew" />
                        <dxb:BarButtonItemLink BarItemName="bOpen" />
                        <dxb:BarButtonItemLink BarItemName="bSave" />
                        <dxb:BarButtonItemLink BarItemName="bExit" />
                    </dxb:Bar.ItemLinks>
                </dxb:Bar>
                <dxb:Bar Caption="Panel2Bar" x:Name="Bar2" UseWholeRow="True" ShowDragWidget="False" AllowQuickCustomization="False">
                    <dxb:Bar.DockInfo>
                        <dxb:BarDockInfo ContainerName="{x:Null}" />
                    </dxb:Bar.DockInfo>
                    <dxb:Bar.ItemLinks>
                        <dxb:BarButtonItemLink BarItemName="bNew" />
                        <dxb:BarItemLinkSeparator/>
                        <dxb:BarButtonItemLink BarItemName="bOpen" />
                        <dxb:BarItemLinkSeparator/>
                        <dxb:BarButtonItemLink BarItemName="bSave" />
                        <dxb:BarItemLinkSeparator/>
                        <dxb:BarButtonItemLink BarItemName="bExit" />
                    </dxb:Bar.ItemLinks>
                </dxb:Bar>
            </dxb:BarManager.Bars>
            <DockPanel>
                <dxb:BarContainerControl Name="Top_Container" DockPanel.Dock="Top"/>
                <dxd:DockLayoutManager Name="dockLayoutManager1" ItemsSource="{Binding WidgetList}" FloatingMode="Desktop"
                                       dx:WorkspaceManager.IsEnabled="True" 
                                       dxd:RestoreLayoutOptions.RemoveOldPanels="True"
                                       dxd:RestoreLayoutOptions.AddNewPanels="True"
                                       BeforeItemAdded="dockLayoutManager1_BeforeItemAdded" >
                    <dxd:LayoutGroup x:Name="group">
                        <dxd:LayoutPanel Visibility="Collapsed" />
                        <dxd:DocumentGroup x:Name="PanelHost" DestroyOnClosingChildren="False">

                        </dxd:DocumentGroup>
                    </dxd:LayoutGroup>

                    <!--<dxd:DockLayoutManager.ContextMenuCustomizations>
                        <dxb:AddBarItemLinkAction>
                            <dxb:BarItemLinkSeparator />
                        </dxb:AddBarItemLinkAction>
                        <dxb:BarButtonItem Name="bAbout" CategoryName="Help" Content="About" />
                    </dxd:DockLayoutManager.ContextMenuCustomizations>
                    <dxd:DockLayoutManager.ItemSelectorMenuCustomizations>
                        <dxb:AddBarItemLinkAction>
                            <dxb:BarItemLinkSeparator />
                        </dxb:AddBarItemLinkAction>
                        <dxb:BarButtonItem Name="bHome" CategoryName="Help" Content="AAA" />
                    </dxd:DockLayoutManager.ItemSelectorMenuCustomizations>-->
                </dxd:DockLayoutManager>
            </DockPanel>
        </dxb:BarManager>
    </Window>

Answer 1

图片无法调整大小，因为它的高度和宽度是固定的。删除图像的高度和宽度。

    <Grid>
      <Image HorizontalAlignment="Left"  Margin="96,104,0,0"  Source="{Binding Image}" VerticalAlignment="Top" />
    </Grid>

并从图片标签中删除 TextWrapping="Wrap"。 TextWrapping不是属性的图片控制

Answer 2

试试这个代码：

 <Grid> <Image HorizontalAlignment="Left" Source="{Binding Image}" VerticalAlignment="Top" HorizontalAlignment="Left" /> </Grid>

通过更改 window 或文档面板的大小来调整我的用户控件内容的大小

Resize my user controls content with change in size of window or document panel

wpf

xaml

user-controls

devexpress