none
How can I shrink the focus rectangle to its content's width?

    Question

  • Hi,

    In my WPF app, I have some CheckBox elements inside a Grid control. When they receive focus, their focus rectangle extends to the entire width of the grid column. In a similar Windows Forms app, the focus rectangle neatly surrounds only the CheckBox's text (with no additional whitespace) even though the actual element is much wider. How can I make my WPF app also shrink its focus rectangle to only surround the actual text and not the entire element? Here is a screencap of what I am talking about:




    Thanks,

    --Brandon
    Monday, November 17, 2008 8:06 PM

Answers

  • <Grid > 
            <Grid.RowDefinitions> 
                <RowDefinition Height="Auto" MinHeight="13" /> 
                <RowDefinition Height="Auto" MinHeight="13" /> 
            </Grid.RowDefinitions> 
            <Grid.ColumnDefinitions> 
                <ColumnDefinition Width="Auto" MinWidth="0" /> 
            </Grid.ColumnDefinitions> 
            <CheckBox Height="13.277" HorizontalAlignment="Left" VerticalAlignment="Top" Width="136">Content will be put here</CheckBox> 
            <CheckBox Grid.Row="1">Content would be put here again, another test checkbox</CheckBox> 
        </Grid> 

    Try the XAML in a XAML editor. The Width has been set to Auto and a MinWidth for that column which has checkbox has been set to 0. So the min width taken would be 0 device pixels and this makes the Grid layout take only that much extra space that is needed. Works well!

    Please let me know if this helps you out.





    Research and Development Imageright Inc. http://krishnabhargav.blogspot.com
    • Marked as answer by bsiegel Monday, November 17, 2008 8:31 PM
    Monday, November 17, 2008 8:18 PM

All replies

  • <Grid > 
            <Grid.RowDefinitions> 
                <RowDefinition Height="Auto" MinHeight="13" /> 
                <RowDefinition Height="Auto" MinHeight="13" /> 
            </Grid.RowDefinitions> 
            <Grid.ColumnDefinitions> 
                <ColumnDefinition Width="Auto" MinWidth="0" /> 
            </Grid.ColumnDefinitions> 
            <CheckBox Height="13.277" HorizontalAlignment="Left" VerticalAlignment="Top" Width="136">Content will be put here</CheckBox> 
            <CheckBox Grid.Row="1">Content would be put here again, another test checkbox</CheckBox> 
        </Grid> 

    Try the XAML in a XAML editor. The Width has been set to Auto and a MinWidth for that column which has checkbox has been set to 0. So the min width taken would be 0 device pixels and this makes the Grid layout take only that much extra space that is needed. Works well!

    Please let me know if this helps you out.





    Research and Development Imageright Inc. http://krishnabhargav.blogspot.com
    • Marked as answer by bsiegel Monday, November 17, 2008 8:31 PM
    Monday, November 17, 2008 8:18 PM
  • The trick, which seems obvious now in retrospect, was to apply a style that sets the HorizontalAlignment to "Left" rather than the implicit default, "Stretch". The only concern I would have is will the framework still render the layout properly when rendering in a right-to-left language? Thanks, Krishna!

    --Brandon
    Monday, November 17, 2008 8:36 PM
  • Right. My bad that i related MinWidth to do the trick. Thanks for the correction.
    Research and Development Imageright Inc. http://krishnabhargav.blogspot.com
    Monday, November 17, 2008 8:45 PM
  • Brandon,

    You did the right thing, HorizontalAlignment was the key here. In RTL languages WPF will do the correct thing and place the checkbox on the right instead.
    Controls for WPF and Windows Forms at http://www.divelements.co.uk
    Monday, November 17, 2008 10:04 PM
  • Hello Krishna,

    I am having the same problem mentioned by Brandon above threads.My problem is when I am focusing checkbox with tab, only content is getting focused but rectangle is not. I want rectangle and checkbox should be focused.I tried with your example,but it doesnt solved my problem.let me know if you have any other solution. Waiting for ur reply.

    Thanks

    Naga

    Friday, April 30, 2010 6:06 PM