Re: Stopping resizing of usercontrol and grid cell visibility - WPF Discussion Boards

Yes, I've looked at them. They're more complex and I need and in addition I have some special needs that preclude me from using them.

If it's not broken, fix it until it is

Hello Everyone,

I am working on WPF app and got stucked on below items, any help would be greatly appreciated.

1) I am using usercontrol (do not want to use window) and want to stop resizing of it but cannot see any property. please help me in achieving the same.

2) I have a Grid having rowdefinitions and columndefinitions which is containing multiple button inside it. my task is whenever i am setting the visibility of any button to false that cell space should get released and next button should overcome this position.

Many Thanks

Without knowing more about your app, I would suggest the following:

1) Set the .VerticalAlignment and .HorizontalAlignment of the user control to something other than "Stretch"

2) To reclaim the space of a "hidden" control, set its .Visibility to "Collapsed". (You may have to also set the .Width of the cell to "Auto")

Hi Gerry,

Thanks for your quick response.

1) for point 1 , i will check and confirm back to you

2) for point 2 , i cannot see any cell definition in grid , i am using like this

XML

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
</Grid.RowDefinitions>

my control is

<textblock textwrapping="Wrap" textalignment="Center" style="{StaticResource TextBlockStyle}">
QC Report

now when i m using the collapsed property of visibility of button, space is not releasing. please suggest.

Regards

Your "grid" in (2) has only 2 rows, yet your button's .Row is 2 (relative to 0).

I'd correct that before trying other things.

Hi Gerry,

Sorry , my bad , actually i alter this to set as an example and forget to change the value. Yes you're correct it should be 1. so , bascally i am having 2,2 grid with buttons on every cell. Now please suggest how can i use collapsed property on cell . Thanks

Show what you've coded; the elements you need have already been discussed.

You should be able to toggle .Visibility in design mode and see the results with a simple grid and some buttons.

So if I am correct in understanding, you have a UserControl that is a button that you want to place in Grid.Row 2. Judging by the HorizontalAlignment="Left" and the Vertical Alignment="Center", this button is going to be placed in this grid along with some other control and you want them aligned and not to resize?

C#

<UserControl ...YourUserControl designHeight="50" designWidth="100">
    <Button x:Name="btnQCReport" Content="QC Report" Style="{StaticResource ButtonStyle}"/>
</UserControl>

1) Grid.Row="0" is the first row, Grid.Row="1" would be the second row, and since there are only 2 rows defined in the definition, I think the first step is to make it Grid.Row="1". Also, If there is nothing in Grid.Row="0" then the Auto deceleration would essentially be empty, and no space taken up.

2) VerticalAlignment="Center" and HorizontalAlignment="Left" are not going to be valid unless there are other controls inside this grid along with the usercontrol, otherwise the Auto will size the width and height to the control. Having said that, if there is indeed another control that is taller and wider than this control, inside the same grid space, then indeed this would need to be set. Also, if there is more than one control you will need some kind of arrangement control such as a StackPanel to place them. For example:

C#

<Grid Grid.Row="1">
    <StackPanel Orientation="Horizontal">
        <local:YourUserControl Height="50" Width="100" HorizontalAlignment="Left" VerticalAlignment="Center"/>
        <local:AnotherUserControl Height="100" Width="200"/>
    </StackPanel>
</Grid>

Next I am guessing you have a property bound to the visibility that changes the visibility of your button; however, just to illustrate my point, if you were to set the visibility property to collapsed, the space should release. Such as:

C#

<Grid Grid.Row="1">
    <StackPanel Orientation="Horizontal">
        <local:YourUserControl Height="50" Width="100" HorizontalAlignment="Left"
                                    VerticalAlignment="Center" Visibility="Collapsed"/>
        <local:AnotherUserControl Height="100" Width="200"/>
    </StackPanel>
</Grid>

Hope this is what you were looking for! Again I am making a few assumptions, so if I am not answering what you are asking, if you could be more specific I would be happy to continue to try and assist you!

Hi J. Calhoun,

Thanks for your time to look into my problem and come up with above solution. Unfortuantely this is not what i am looking for , as i have replied to kerry :

i am having 2,2 size grid holding buttons on all cell, when i make any of the button invisible , i want to release that cell space but collapsed not working here . i hope you got my problem now.
Thanks

Ok, yes I think I understand a little better now, so you have a 2 x 2 grid, each has a button in it. When one of those buttons is set to collapsed you want the grid space to be released. Here is the solution I have come up with.

1) you only need to do row definitions

C#

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    <Grid.RowDefinitions>
</Grid>

Next you will want to declare some stack panels

C#

<StackPanel Grid.Row="0">
    <StackPanel Orientation="Horizontal">
        <Button Height="50" Width="100" />
        <Button Height="50" Width="100" />
    /StackPanel>
</StackPanel>

C#

<StackPanel Grid.Row="1">
    <StackPanel Orientation="Horizontal">
        <Button Height="50" Width="100" />
        <Button Height="50" Width="100" />
    /StackPanel>
</StackPanel>

Now you have a button in each quadrant and as you set each visibility to collapsed you will see that the grid space previously held by the button will be released.

You may have to do some sizing with the UserControl or Window that hosts the grid that this is placed in, but the concept should be what you are asking.

Hope this correctly identifies your issue and helps with a resolution!

Hello J. Calhoun,

thannks for quick response.

i can only test out this when i am back to my office and will surely update feedback on this forum.

This solution seems to work but want to check for one case

If my button belongs to row 2 with position 1 and if i make visiblilty collapsed of button belongs to row 1 and second position than this position will be taken by row 2 , 1st button?

[In more simple words , button belongs to row 2 , column 1 should take the position of button belongs to row 1 , column 2 when existing button of row 1 , column 2 become collapsed]

I need this case to be meet. thanks

In that case it might be possible to put all of the buttons in a

HTML

<WrapPanel Orientation="Horizontal">

and size it to let the third and fourth button wrap to the second row, that way when the space is released they will filter back up to the top row.

Hi,

I tried your way of using wrappanel but using this it is aligning all the buttons to horizontal on default load itself.

below is my original code , it will help you to understand by button arrangement.

<UserControl x:Class="iPLAN20.Windows.LS.dckSafeDevt"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns Big Grin | :-D

="http://schemas.microsoft.com/expression/blend/2008"
xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms"
xmlns:local="clr-namespace:iPLAN20.Model.LS"
xmlns:stb="clr-namespace:UIControls;assembly=iPLAN20UIControls" HorizontalAlignment="Left" VerticalAlignment="Top" Name="ucSafeDevt">
<UserControl.Resources>
<local:clsAppSiteModel x:Key="AppSiteModel"/>
</UserControl.Resources>
<Grid HorizontalAlignment="Left" Name="gridLandSafeguarding" DataContext="{StaticResource AppSiteModel}">
<Grid.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="..\..\Resources\ButtonStyle.xaml"/>
<ResourceDictionary Source="..\..\Resources\textbox.xaml"/>
<ResourceDictionary Source="..\..\Resources\Common.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Grid.Resources>

<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>

<Label Grid.Row="0" Grid.Column="0" Style="{StaticResource ASCIILabelStyle}" Content="Site No.:" HorizontalAlignment="Left" VerticalAlignment="Center"/>
<StackPanel Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2" Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Center">
<TextBox Text="{Binding TestText}" stb:AutoCompleteBehavior.AutoCompleteItemsSource="{Binding AppSiteList}" AutoWordSelection="True" Width="150" Name="txtSearchAppSite" TextAlignment="Center" Margin="5,5,0,5" VerticalContentAlignment="Center"/>
<Button IsDefault="True" x:Name="btnFind" Style="{StaticResource MetroButton}" Margin="1" Click="btnFind_Click">
<Button.Content>
<StackPanel Orientation="Horizontal">
<Image Source="/IPLAN20;component/Images/Search.png"/>
</StackPanel>
</Button.Content>
</Button>
</StackPanel>

<Label Style="{StaticResource ASCIILabelStyle}" Content="Commands:" Grid.Column="0" Grid.Row="1" HorizontalAlignment="Left" VerticalAlignment="Center"/>
<Button Grid.Row="2" Grid.Column="0" Height="50" x:Name="btnNewSite" Width="100" IsEnabled="True" HorizontalAlignment="Left" VerticalAlignment="Center" Click="btnNewSite_Click" Style="{StaticResource ButtonStyle}">
<TextBlock TextWrapping="Wrap" TextAlignment="Center" Style="{StaticResource TextBlockStyle}">
New Site
</TextBlock>
</Button>

<Button Grid.Row="2" Grid.Column="1" x:Name="btnModifySite" Width="100" Height="50" IsEnabled="True" HorizontalAlignment="Left" VerticalAlignment="Center" Style="{StaticResource ButtonStyle}">
<TextBlock TextWrapping="Wrap" TextAlignment="Center" Style="{StaticResource TextBlockStyle}">
Modify Site
</TextBlock>
</Button>
<Button Grid.Row="2" Grid.Column="2" Height="50" x:Name="btnDraft" Width="100" IsEnabled="True" HorizontalAlignment="Left" VerticalAlignment="Center" Style="{StaticResource ButtonStyle}">
<TextBlock TextWrapping="Wrap" TextAlignment="Center" Style="{StaticResource TextBlockStyle}">
Save to Draft
</TextBlock>
</Button>
<Button Grid.Row="3" Grid.Column="0" Height="50" x:Name="btnLowHgtCtrl" Width="100" HorizontalAlignment="Left" VerticalAlignment="Center" Style="{StaticResource ButtonStyle}">
<TextBlock TextWrapping="Wrap" TextAlignment="Center" Style="{StaticResource TextBlockStyle}">
Lowest Height Control
</TextBlock>
</Button>
<Button Grid.Row="3" Grid.Column="1" Height="50" x:Name="btnQCReport" Width="100" HorizontalAlignment="Left" VerticalAlignment="Center" Style="{StaticResource ButtonStyle}">
<TextBlock TextWrapping="Wrap" TextAlignment="Center" Style="{StaticResource TextBlockStyle}">
QC Report
</TextBlock>
</Button>
<Button Grid.Row="3" Grid.Column="2" Height="50" x:Name="btnSendQC" Width="100" HorizontalAlignment="Left" VerticalAlignment="Center" Style="{StaticResource ButtonStyle}">
<TextBlock TextWrapping="Wrap" TextAlignment="Center" Style="{StaticResource TextBlockStyle}">
Send for QC
</TextBlock>
</Button>
<Button Grid.Row="4" Grid.Column="0" Height="50" x:Name="btnMaintainSchemechklst" Width="100" IsEnabled="True" HorizontalAlignment="Left" VerticalAlignment="Center" Style="{StaticResource ButtonStyle}">
<TextBlock TextWrapping="Wrap" TextAlignment="Center" Style="{StaticResource TextBlockStyle}">
Maintain Scheme Checklist
</TextBlock>
</Button>
<Button Grid.Row="4" Grid.Column="1" Height="50" x:Name="btnConfigureStryHghts" Width="100" IsEnabled="True" HorizontalAlignment="Left" VerticalAlignment="Center" Style="{StaticResource ButtonStyle}">
<TextBlock TextWrapping="Wrap" TextAlignment="Center" Style="{StaticResource TextBlockStyle}">
Configure Storey Heights
</TextBlock>
</Button>

<StackPanel Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="3" Orientation="Vertical" HorizontalAlignment="Stretch" >
<Label Style="{StaticResource ASCIILabelStyle}" Content="My Drafts:" HorizontalAlignment="Left" VerticalAlignment="Center"/>
<ListBox Name="listBoxDraftVersions" Height="200" Width="250" Background="Azure" Margin="3" ItemsSource="{Binding TheList}">
<ListBox.ItemTemplate>
<DataTemplate>
<CheckBox Name="CheckBoxZone" Content="{Binding TheText}" Tag="{Binding TheValue}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>

<Button Content="Load" Grid.Row="6" Grid.Column="0" IsDefault="True" x:Name="btnLoad" Style="{StaticResource MetroButton}"/>
<Button Content="Reassign" Grid.Row="6" Grid.Column="1" IsDefault="True" x:Name="btnReassign" Style="{StaticResource MetroButton}"/>
<Button Content="Delete" Grid.Row="6" Grid.Column="2" IsDefault="True" x:Name="btnDelete" Style="{StaticResource MetroButton}"/>

</Grid>
</UserControl>

Thank you, this did help me to get a visual of what you are trying to accomplish. I still have one question and that is, the only buttons that you want to change the visibility on are the 8 buttons in the middle of your control correct? Under that assumption I have come up with a solution that I believe meets your requirements.

I made a User Control with the design height at 500 and the design width at 300 which allowed me to fit all your controls in the window and keep the same arrangement scheme that you provided.

Next, I created 3 rows and seperated your controls into the 3 Sections. The top controls will go in the first StackPanel like this:

HTML

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <StackPanel>
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Row="0">
            <Label Content="Site No.:" HorizontalAlignment="Left" VerticalAlignment="Center"/>
            <TextBox Width="150" Margin="5,5,0,5" HorizontalAlignment="Left" VerticalAlignment="Center"/>
            <Button Margin="1" Content="YourImage"/>
        </StackPanel>
        <Label Content="Commands" HorizontalAlinment="Left" VerticalAlignment="Center"/>
    </StackPanel>

The WrapPanel is where I host your 8 buttons, and the StackPanels will host your other controls.

HTML

<WrapPanel Orientation="Horizontal" Grid.Row="1">
        <Button Height="50" Width="100" HorizontalAlignment="Left" VerticalAlignment="Center">
            <TextBlock TextWrapping="Wrap" TextAlignment="Center">
            New Site
            </TextBlock>
        </Button>
        <Button Height="50" Width="100" HorizontalAlignment="Left" VerticalAlignment="Center">
            <TextBlock TextWrapping="Wrap" TextAlignment="Center">
                Modify Site
            </TextBlock>
        </Button>
        <Button Height="50" Width="100" HorizontalAlignment="Left" VerticalAlignment="Center">
            <TextBlock TextWrapping="Wrap" TextAlignment="Center">
            Save To Draft
            </TextBlock>
        </Button>
        <Button Height="50" Width="100" HorizontalAlignment="Left" VerticalAlignment="Center">
            <TextBlock TextWrapping="Wrap" TextAlignment="Center">
            Lowest Height Control
            </TextBlock>
        </Button>
        <Button Height="50" Width="100" HorizontalAlignment="Left" VerticalAlignment="Center">
            <TextBlock TextWrapping="Wrap" TextAlignment="Center">
            QC Report
            </TextBlock>
        </Button>
        <Button Height="50" Width="100" HorizontalAlignment="Left" VerticalAlignment="Center">
            <TextBlock TextWrapping="Wrap" TextAlignment="Center">
            Send for QC
            </TextBlock>
        </Button>
        <Button Height="50" Width="100" HorizontalAlignment="Left" VerticalAlignment="Center">
            <TextBlock TextWrapping="Wrap" TextAlignment="Center">
            Maintain Scheme Checklist
            </TextBlock>
        </Button>
        <Button Height="50" Width="100" HorizontalAlignment="Left" VerticalAlignment="Center">
            <TextBlock TextWrapping="Wrap" TextAlignment="Center">
            Configure Storey Heights
            </TextBlock>
        </Button>

This WrapPanel will cause your controls to take up the space that the collapsed button used to occupy and will move up rows if there is enough space on the row above it. The width of the WrapPanel will determine how many buttons per row as the buttons will fill in horizontally before moving down to the next row, this is possibly the reason for the vertical alignment you previously mentioned.
And Finally You can put your Last Section in another StackPanel:

HTML

    <StackPanel Grid.Row="2" HorizontalAlignment="Stretch">
        <Label Content"My Drafts:" HorizontalAlignment="Left" VerticalAlignment="Center"/>
        <Listbox Height="200" Width="250" Background="Azure" Margin="3"/>
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
            <Button Content="Load" Width="75" Margin="0,0,10,0"/>
            <Button Content="Reassign" Width="75" Margin="0,0,10,0"/>
            <Button Content="Delete" Width="75" Margin="0,0,10,0"/>
        </StackPanel>
    </StackPanel>
</Grid>

I hope this meets your requirements! If you have any other questions I will be happy to help!

Thanks a lot. You're amazing . This is working as i wanted. Smile | :)

My post started with 2 questions and i am still finding answer for 1st part , please see if you can help me this one too. Let me narrow down my problem:

ORIGINAL POST
"I am using usercontrol (do not want to use window) and want to stop resizing of it but cannot see any property. please help me in achieving the same."

MORE DETAILS
I am binding this usercontrol to dockablewindow of other libraries. How can i control resizing of System.Windows.Forms.Integration.ElementHost()?

here is the code

public class AddinImpl : ESRI.ArcGIS.Desktop.AddIns.DockableWindow
{
private System.Windows.Forms.Integration.ElementHost m_windowUI;

public AddinImpl()
{
}

protected override IntPtr OnCreateChild()
{
m_windowUI = new System.Windows.Forms.Integration.ElementHost();
m_windowUI.Child = new dckSafeDevt();
//m_windowUI.MaximumSize = new System.Drawing.Size(305, 500);
return m_windowUI.Handle;
}

protected override void Dispose(bool disposing)
{
if (m_windowUI != null)
m_windowUI.Dispose();

base.Dispose(disposing);
}

}

dckSafeDevt is my usercontrol. Anyhelp on same will be really appreciated. Thanks a ton.

Regards

First thing I noticed is the commented line:

C#

//m_windowUI.MaximumSize = new System.Drawing.Size(305, 500);

This will only set the maximum size of the element host so that you can not size it any larger than this size. The same rule will apply to MinimumSize, it will not size any smaller than that size.

C#

m_windowUI.Size = new System.Drawing.Size(305,500);

is the event that I believe you are looking for. It has been a while since I worked with windows forms, but I believe when you set the size of a control it will not resize when the window does.

I suppose you could set a minimum and maximum that are the same size, but the real thing to understand here is that both the user control and the element host inherit from Control, so they should both be thought of as controls inside a window.

Now, that being said you can find a good reference of all of the properties of your element host here:
https://msdn.microsoft.com/en-us/library/vstudio/system.windows.forms.integration.elementhost%28v=vs.100%29.aspx[^]
And could possibly fix the client area of the control to a certain size, that way the UserControl would only fit inside that area?

Again it has been a while since I worked with Windows.Forms, but I will create a little dummy project and see if I can't find a solution, but hopefully these suggestions might get you on the right track.

If you could help me get a visual of what I need to recreate... Windows.Forms Window, element host, then WPF UserControl. The UserControl is in the element host that is docked inside a window with other winforms controls? or is the usercontrol hosted by itself inside the window?

I can't remember what I forgot...

G'Day,

Your suggestions are very helpfull but still i am not able to achieve this. I cannot able to stop resizing using m_windowUI.Size = new System.Drawing.Size(305,500).

As you asked , it is usercontrol only hosted within dockable window of esri using elementhost.

Thanks again for all your help

Is it possible to load various parts of a WPF UI in different threads?

I've got some UserControls loading that are slow, and I'd like to see if threading them would speed up the loading.

If it's not broken, fix it until it is

Perhaps you could use some clever loading technique on some of the elements instead:
http://www.zagstudio.com/blog/498#.VfQSwH-qpBc[^]

Rather than that, you should identify what the slowdown is and fix that. There are various optimisation techniques, but they are going to require you to do some root cause analysis first.

I can't. Some of this is an old third party WinForms control that we're forced to use right now.

If it's not broken, fix it until it is

Well, threading isn't going to do anything. Creating an instance of the control cannot be done on a separate thread. It has to done on the UI (startup) thread since the form you're going to stick the control to is on the UI thread.

Really, you HAVE to do root cause analysis here. Is it the creation of the control that is slow or is it retrieving data that the control is going to use that is slow?

If it's the creation of the control there's nothing you can do about it.

A guide to posting questions on CodeProject

Click this: Asking questions is a skill.
Seriously, do it.

Dave Kreskowiak

I have UserControl with it's VerticalAlignment set to Bottom so it's always along the bottom of the window.

At runtime the user can set a mode that causes it's height to increase. The problem is that all that does is extend it past the bottom of the window.

The control's Grid Height is "*".

How can I make all of it visible when it's height changes?

If it's not broken, fix it until it is

Not sure what you are doing with your control, but if it was like a Status bar or similar, Id either use RowDefinitions or a DockPanel to set it at the bottom. But without any code, or an exact explanation of what you want to achieve its hard to give you any better advice.

If you are trying to have a control, that is always aligned to the bottom of the window, yet when the height property changes, the height goes up instead of down I suggest you do something like this:

C#

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

Then on the bottom grid:

C#

<Grid Grid.Row="2" x:Name="MyGrid" VerticalAlignment="Stretch" HorizontalAlignment="Stretch/>

On Runtime if you would like to change the height of the control, then all you would need to do is change the height of the Grid. By doing this you keep your control inside the bounds of the grid, yet if the grid height changes, so will the control since the property is set to stretch.