locked
Combobox styling - Any methods to wrap the text ?

    Question

  • I've a combobox defined in XAML. I'm sharing the snippet here. Can someone please let me know if we can wrap the text of the items we drop down ? In my case, i've the width of the box defined and my combo items text  length differs in different languages due to which the text is getting kind of clipped/hidden.

    <combobox grid.row=2 grid.clumn= 2 x:Name="Mytestcombo" SelectedIndex="0" TabIndex="0" Width="300">

    <comboboxitem x:uid="Select choice" />

    <comboboxitem x:uid = "Item1" />

    <comboboxitem x:uid = "item2" />

    </combobox>

    I tried defining an item template like this but that didn't server my purpose.

    <combobox.itemtemplate>

    <datatemplate>

    <textblock text="{Binding}" TextWrapping="Wrap" />

    </DataTemplate>

    </combobox.itemtemplate>

    Thanks !!

    Wednesday, November 20, 2013 1:27 PM

Answers

All replies

  • Can you use a stack panel to contain your combobox?  You could remove the sizing attributes and allow it to size itself then.

    Jeff Sanders (MSFT)

    @jsandersrocks - Windows Store Developer Solutions @WSDevSol
    Getting Started With Windows Azure Mobile Services development? Click here
    Getting Started With Windows Phone or Store app development? Click here
    My Team Blog: Windows Store & Phone Developer Solutions
    My Blog: Http Client Protocol Issues (and other fun stuff I support)

    Thursday, November 21, 2013 1:29 PM
    Moderator
  • Thanks..

    We also notice combobox automatically resizes whenever text longer than the assigned width occurs in its view.

    I mean size of the combobox changes whenever a long text is chosen to automatically accommodate it.

    Is there a way to control that ?

    Thanks !!

    Thursday, November 21, 2013 3:24 PM
  • If you want to set restrictions on the sizes would set the MinWidth and MaxWidth properties.  Or just size it to what you think the max will be.

    Jeff Sanders (MSFT)

    @jsandersrocks - Windows Store Developer Solutions @WSDevSol
    Getting Started With Windows Azure Mobile Services development? Click here
    Getting Started With Windows Phone or Store app development? Click here
    My Team Blog: Windows Store & Phone Developer Solutions
    My Blog: Http Client Protocol Issues (and other fun stuff I support)

    Thursday, November 21, 2013 3:37 PM
    Moderator
  • We've already fixed its size. But in case of longer texts that couldnt be accommodated in the predefined width, combobox automatically resizes to completely render the long text.

    My question is like is it possible to wrap around the text or even use trimming and control the automatic size change of the combobox.

    Thanks !!

    Thursday, November 21, 2013 4:07 PM
  • Let me explain this a bit more using MS sample apps. Let this be the snippet. To accommodate the lengthy text combobox is auto resized. Is there a way to control that, retain combobox's size but let the lengthy text wrap around or trim ? 

    <Grid x:Name="Input" Grid.Row="0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <TextBlock x:Name="InputTextBlock1" Grid.Row="0" TextWrapping="Wrap" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Left">
                    Snap-Points can be set to aid users in getting to key locations in the content. There are two different types of snap-points:<LineBreak/><LineBreak/>
                Mandatory Snap-Points (Mandatory and MandatorySingle) - When the user lifts their finger, the content is always smoothly animated to a snap-point. <LineBreak/>
                Proximity Snap-Points (Optional and OptionalSingle) - Unlike mandatory snap-points, the content only changes where it will stop if the motion naturally ends "close enough" to a snap-point. 
                </TextBlock>
                <StackPanel Orientation="Vertical" Margin="0,10,0,0" Grid.Row="1">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Style="{StaticResource BasicTextStyle}" VerticalAlignment="Center" Text="Select Snap-Point Type:" />
                        <ComboBox x:Name="snapPointsCombo" SelectedIndex="0" Width="100" Margin="20,0,0,0" SelectionChanged="ComboBox_SelectionChanged_1">
                            <ComboBoxItem>None</ComboBoxItem>
                            <ComboBoxItem>Optional</ComboBoxItem>
                            <ComboBoxItem>Optional Single</ComboBoxItem>
                            <ComboBoxItem>Mandatory</ComboBoxItem>
                            <ComboBoxItem>Mandatory Single</ComboBoxItem>
                            <ComboBoxItem>Mandatory Single</ComboBoxItem>
                            <ComboBoxItem>Mandatory Single</ComboBoxItem>
                            <ComboBoxItem>Mandatory Single</ComboBoxItem>
                            <ComboBoxItem>Mandatory Single MAndatory single</ComboBoxItem>
                            <ComboBoxItem>Mandatory Single</ComboBoxItem>
                            <ComboBoxItem>Mandatory Single</ComboBoxItem>
                            <ComboBoxItem>Mandatory Single</ComboBoxItem>
                            <ComboBoxItem>Mandatory Single</ComboBoxItem>
                            <ComboBoxItem>Mandatory Single</ComboBoxItem>
                            <ComboBoxItem>Mandatory Single</ComboBoxItem>
                            <ComboBoxItem>Mandatory Single</ComboBoxItem>
                            <ComboBoxItem>Mandatory Single</ComboBoxItem>
                            <ComboBoxItem>Mandatory Single</ComboBoxItem>
                            <ComboBoxItem>Mandatory Single</ComboBoxItem>
                            <ComboBoxItem>Mandatory Single</ComboBoxItem>
                            <ComboBoxItem>Mandatory Single</ComboBoxItem>
                            <ComboBoxItem>Mandatory Single</ComboBoxItem>
                            <ComboBoxItem>Mandatory Single</ComboBoxItem>
                            <ComboBoxItem>Mandatory Single</ComboBoxItem>
                            <ComboBoxItem>MandatorySingle combobox is renedered here to accomodate this lenght text</ComboBoxItem>
                        </ComboBox>
                    </StackPanel>
                    <Button x:Name="scenario2Clear" Content="Reset" Margin="0,10,0,0" Click="Scenario2Reset"/>
                </StackPanel>
            </Grid>

    

    Sunday, November 24, 2013 8:30 AM
  • No you cannot do what you want with the standard control.  You would need to create your own control to do something like this.

    Jeff Sanders (MSFT)

    @jsandersrocks - Windows Store Developer Solutions @WSDevSol
    Getting Started With Windows Azure Mobile Services development? Click here
    Getting Started With Windows Phone or Store app development? Click here
    My Team Blog: Windows Store & Phone Developer Solutions
    My Blog: Http Client Protocol Issues (and other fun stuff I support)

    Monday, November 25, 2013 1:58 PM
    Moderator