Question Obtaining a specific layout in WPF

[MikeI]

I have a question about WPF. The interface shown in the GIF is something written in C++. I've been trying to replicate this effect for some time, but with no success.

What I've been trying to do is create a trigger to give the grid column definition a width of "*" instead of the regular "4*" when the width of the column is lower than 300. Is there a better way to look into/research on achieving this effect?

<Grid>

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

    <Expander Name="anExpander"
    Grid.Row="0"
    VerticalAlignment="Top"
    Header="General"
    IsExpanded="True">

        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="4*" >
                    <ColumnDefinition.Style>
                        <Style>
                            <Style.Triggers>
                                <DataTrigger
                                    Binding="{Binding Path=ColumnDefinition.Width, RelativeSource={RelativeSource Self},Converter={StaticResource CutOffConverter}}" Value="False">
                                    <Setter Property="{Binding Path=ColumnDefinition.Width}" Value="*" />
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </ColumnDefinition.Style>
                </ColumnDefinition>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" MinWidth="10"/>
            </Grid.ColumnDefinitions>
        
            <Grid.RowDefinitions>
                <RowDefinition Height="32" />
                <RowDefinition Height="32" />
                <RowDefinition Height="32" />
                <RowDefinition Height="32" />
                <RowDefinition Height="32" />
            </Grid.RowDefinitions>

            <Label
                Grid.Row="0"
                Grid.Column="0"
                VerticalAlignment="Bottom"
                Content="Name" />
            <TextBox
                x:Name="Name"
                Grid.Row="0"
                Grid.Column="1"
                Grid.ColumnSpan="4"
                Margin="2,5,5,2"
                HorizontalAlignment="Stretch"
                HorizontalContentAlignment="Left"
                Text="{Binding Name, Mode=TwoWay}">
            </TextBox>

            <Label
                Grid.Row="1"
                Grid.Column="0"
                VerticalAlignment="Bottom"
                Content="Profile" />
            <ComboBox
                x:Name="profile"
                Grid.Row="1"
                Grid.Column="1"
                Grid.ColumnSpan="3"
                Margin="2,5,5,2"
                HorizontalAlignment="Stretch"
                HorizontalContentAlignment="Left"
                IsEditable="True"
                ItemsSource="{Binding ProfileCatalog}"
                SelectedItem="{Binding Profile, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
            <Button
                x:Name="profileCatalog"
                Grid.Row="1"
                Grid.Column="4"
                Margin="2,5,0,2"
                HorizontalAlignment="Stretch"
                HorizontalContentAlignment="Center"
                MinWidth="15"
                MaxWidth="35"
                Command="{ui:CommandHandler ProfileCatalogClick}"
                Content="...">
            </Button>
    
        </Grid>
    </Expander>

</Grid>

Basically, prioritizing the resize of the first grid column before any other grid column gets resized is what I'm trying to do.

 

[NoUserHere]

I'm not on WPF projects today to test this as I have limited time to pop in and out of here... But I know what you want to do and it is easy to do. It's actually a fun project.

If the guys don't give you a solution in the next few days, I will try to conjure up something for you. My own personal time restraints are really shitty at the moment... The grid control is one of them controls where I shine best, but you might want to consider building up a template for this and binding the definitions to a slider. Don't hold me to that yet, as I think that's how one would do this in WPF. You could bind your grid definition of both column's/rows? I will try something in a few days and post back if you can wait that long, or if you haven't gotten something from one of the other guys. So if you are happy to wait?

Because of the amount of idiots posting about WPF and the observer pattern, and incorrectly using it. And because of the increase in WPF topics here and on other boards recently, I am also working on a tutorial which I will share on binding data in WPF using a range of patterns, not just MVVM. I am sure it will help you with your project.

Due to my own workflow, I don't have loads time to spare. Meanwhile can you tell me a bit about your app and what it does so I can whip up the right pattern for you to use?

 

[NoUserHere]

@Skydiver, we could have some fun with this one. I just need to set some time aside

 

[NoUserHere]

binding the definitions to a slider.

Correction, I meant GridSplitter.

Ohh its going to be one of them days

 

[MikeI]

The grid control is one of them controls where I shine best, but you might want to consider building up a template for this and binding the definitions to a slider. Don't hold me to that yet, as I think that's how one would do this in WPF. You could bind your grid definition of both column's/rows?

I haven't thought of that, thank you. I will look into it.

Meanwhile can you tell me a bit about your app and what it does so I can whip up the right pattern for you to use?

It's a plugin which is responsible for building more complex components in an application used by engineers in planning the layout of different structures, generating technical drawings and things like that. This application is written in C++, so having access to the source code doesn't help that much. I am using MVVM as a design pattern for this plugin. What I am trying to do is replicate the UI features to look and feel as close as possible to the native tools.