locked
Custom UserControl with relative fixed left margin in Grid RRS feed

  • General discussion

  • Hello,

    I have built a custom control that is displayed in a grid. The control itself is built with grids so that it is relatively sized based on the browser window. When I set the column span of the control to 2, the entire control resizes correctly; the left margin built into the control grows by a factor of 2, as well. The code for the control is as follows:

    <Grid x:Name="LayoutRoot">
            <Grid.RowDefinitions>
                <RowDefinition x:Name="LeftMargin" Height=".1*" />
                <RowDefinition Height=".6*" />
                <RowDefinition Height=".1*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width=".1*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width=".8*" />
            </Grid.ColumnDefinitions>
    
            <Grid x:Name="ContentGrid" Grid.Row="1" Grid.Column="1" Cursor="Hand">
                <Grid.RowDefinitions>
                    <RowDefinition Height=".70*" />
                    <RowDefinition Height=".25*" />
                    <RowDefinition Height=".05*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width=".1*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width=".1*" />
                </Grid.ColumnDefinitions>
                <Viewbox Margin="0,0,0,0" Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Left" Stretch="Uniform">
                    <TextBlock x:Name="Value" TextWrapping="Wrap" Text="[value]" Foreground="#FFF8F8F8" />
                </Viewbox>
                <Viewbox Margin="0,0,0,0" Grid.Column="1" Grid.Row="1" HorizontalAlignment="Left">
                    <TextBlock x:Name="Label" TextWrapping="Wrap" VerticalAlignment="Top" Text="[label]" Foreground="#FFF8F8F8" />
                </Viewbox>
            </Grid>
    
    </Grid>

    The implementation is simple:

                <localControls:ContentBox 
                                LabelText="Project Name"
                                LabelValue="{Binding SelectedProject.Name}" 
                                BackgroundColor="#FF8DC434" 
                                Grid.Row="0"
                                Grid.ColumnSpan="1" />

    However, when the column span is changed to 2, the result is that the left margin grows as well, which I want to fix; however, it cannot be an absolute position. Is there a way to solve this? The project follows MVVM standards, so a control parent object codebehind solution will not work. Codebehind in the actual UserControl is fine.

    Thanks,

    Jake

     

    Friday, February 10, 2012 1:25 PM

All replies

  • Just so I understand you correctly, I've modified your sample a little...  You would like "rect1" (the blue rectangle) to maintain a fixed width whether the Grid.ColumnSpan property of "LayoutRoot" is 1 or 2?

    <Grid ShowGridLines="True" Background="White">
      <Grid.RowDefinitions>
        <RowDefinition Height="1*" />
      </Grid.RowDefinitions>
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*" />
        <ColumnDefinition Width="1*" />
        <ColumnDefinition Width="1*" />
      </Grid.ColumnDefinitions>
      <Rectangle Fill="Red" Grid.Row="0" Grid.Column="0" Opacity="0.5" />
      <Rectangle Fill="Red" Grid.Row="0" Grid.Column="1" Opacity="0.4"/>
      <Rectangle Fill="Red" Grid.Row="0" Grid.Column="2" Opacity="0.3"/>
      <Grid x:Name="LayoutRoot" ShowGridLines="True" Grid.ColumnSpan="2"> 
        <Grid.RowDefinitions> 
          <RowDefinition Height="1*" x:Name="LeftMargin" /> 
          <RowDefinition Height="6*" /> 
          <RowDefinition Height="1*" /> 
        </Grid.RowDefinitions> 
        <Grid.ColumnDefinitions> 
          <ColumnDefinition Width="1*" /> 
          <ColumnDefinition Width="10*" /> 
          <ColumnDefinition Width="8*" /> 
        </Grid.ColumnDefinitions> 
        <Rectangle x:Name="rect1" Fill="Blue" Grid.Row="0" Grid.RowSpan="3" Grid.Column="0" />
        <Grid x:Name="ContentGrid" Grid.Row="1" Grid.Column="1"   Cursor="Hand" Background="Aquamarine"> 
          <Grid.RowDefinitions> 
            <RowDefinition Height="70*" /> 
            <RowDefinition Height="25*" /> 
            <RowDefinition Height="5*" /> 
          </Grid.RowDefinitions> 
          <Grid.ColumnDefinitions> 
            <ColumnDefinition Width="1*" /> 
            <ColumnDefinition Width="10*" /> 
            <ColumnDefinition Width="1*" /> 
          </Grid.ColumnDefinitions> 
          <Viewbox Margin="0,0,0,0" Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Left" Stretch="Uniform"> 
            <TextBlock x:Name="Value" TextWrapping="Wrap" Text="[value]" Foreground="#FFF8F8F8" /> 
          </Viewbox> 
          <Viewbox Margin="0,0,0,0" Grid.Column="1" Grid.Row="1" HorizontalAlignment="Left"> 
            <TextBlock x:Name="Label" TextWrapping="Wrap" VerticalAlignment="Top" Text="[label]" Foreground="#FFF8F8F8" /> 
          </Viewbox> 
        </Grid> 
      </Grid>
    </Grid>
    
    Friday, February 10, 2012 4:28 PM
  • Hi,

    Just so I understand you correctly, I've modified your sample a little...  You would like "rect1" (the blue rectangle) to maintain a fixed width whether the Grid.ColumnSpan property of "LayoutRoot" is 1 or 2?

    Could you explain it more clearly?

    Monday, February 13, 2012 5:07 AM
  • Hello,

    Thanks for the response. Yes, that's basically what I'm trying to do. I've drawn up an image of the problem; let me know if this makes it any more clear. You can view it here. The issue is that the margins internal to the control itself are relative (ColumnDefinition Width=".2*"), but I need to make it relative only to the size of the browser window, not to the overall size of the control.

    Thanks,

    Jake

    Monday, February 13, 2012 10:58 AM