locked
Win 8.1: Size Popup in Windows Store App

    Question

  • In the code below, I have a UserControl which contains a Popup which contains a list of Items. I'm binding to a List<string> object which has 25 strings. The binding and the popup all work.

    The problem I've having is sizing. Even though I've set the Width and Height of the UserControl and the Popup, the UserControl still sizes to however much content is there.

    I'd really like to statically size this. If that's not the way to go, I'd like break the ItemsControl into multiple columns. Right now, the bottom of the single column of items is so tall it's running off the bottom of the screen.

    All thoughts appreciated.

    <UserControl
        x:Class="MyParameters"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:MyViews"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:vmQuery="using:MyViewModel.Query"
        xmlns:converter="using:MyViews.Converters"
        mc:Ignorable="d"
        d:DesignHeight="300"
        d:DesignWidth="400"
        Height="300"
        Width="400">
        <UserControl.DataContext>
            <vmQuery:TheList />
        </UserControl.DataContext>
    
        <UserControl.Resources>
            <converter:CombineIdAndDisplayStringConverter x:Key="combineIdAndDisplayConverter" />
        </UserControl.Resources>
    
        <Popup Name="MyPopup"
            IsLightDismissEnabled="True"
            HorizontalAlignment="Right"
            Margin="80,30,0,0"
               Height="300"
               Width="400">
    
            <StackPanel Background="Gray" Orientation="Vertical">
    
                <ItemsControl ItemsSource="{Binding ListOfNames, Mode=TwoWay}">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <CheckBox Content="{Binding Id}" IsChecked="{Binding IsChecked}" />
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
    
                <StackPanel Orientation="Horizontal" >
                    <Button x:Name="btnOk"
                            Margin="10" Content="OK" Click="btnOk_Click" />
                    <Button x:Name="btnCancel" 
                            Margin="10"
                            Content="Cancel" Click="btnCancel_Click"/>
                </StackPanel>
            </StackPanel>
        </Popup>
    </UserControl>
    


    Randy

    Wednesday, March 05, 2014 7:20 PM

Answers

  • You can change how each item displays by editing the DataTemplate to add structure to each item. The tile itself will be centered, but you can give it a width so the tiles all line up and then left align your Checkbox within the tile. For example:

    <DataTemplate>
        <Border Width=250>
            <CheckBox Content="{Binding Name}" IsChecked="{Binding IsChecked, Mode=TwoWay}" />
        </Border>
    </DataTemplate>

    --Rob

    Thursday, March 06, 2014 6:09 PM
    Owner

All replies

  • The problem with static sizing is that it's hard to get right on different sized screens.

    If you have many items in your ItemsControl then I'd think about using a GridView instead of a raw ItemsControl. This will make better use of columns (and tiling).

    I'm not quite sure what the point of this UserControl is, but it may be just that it's broken down from the real project. I assume in reality it includes more than just the Popup?

    If you need more specific help can you please provide a minimal sample demonstrating the problem and a clear description of the difference between the actual and desired results?

    --Rob

    Thursday, March 06, 2014 2:10 AM
    Owner
  • I changed the code to use a GridView. It does everything I wanted except that each item is now centered in the column. I really need each item to be left-aligned, which I thought would be trivial. I tried applying HorizontalAlignment="Left" to every tag that would accept it, but still not luck. There are many posts on aligning items in a GridView, but most are for an ASP.NET context. Any pointers on getting the items left-aligned would be appreciated.

    Thanks!

    <GridView ItemsSource="{Binding MyList, Mode=TwoWay}" HorizontalAlignment="Left">
        <GridView.ItemTemplate>
            <DataTemplate>
                <CheckBox Content="{Binding Name}" IsChecked="{Binding IsChecked, Mode=TwoWay}" />
            </DataTemplate>
        </GridView.ItemTemplate>
        <GridView.ItemsPanel>
            <ItemsPanelTemplate>
                <ItemsWrapGrid MaximumRowsOrColumns="10" />
            </ItemsPanelTemplate>
        </GridView.ItemsPanel>
    </GridView>

     

    Randy

    Thursday, March 06, 2014 2:38 PM
  • You can change how each item displays by editing the DataTemplate to add structure to each item. The tile itself will be centered, but you can give it a width so the tiles all line up and then left align your Checkbox within the tile. For example:

    <DataTemplate>
        <Border Width=250>
            <CheckBox Content="{Binding Name}" IsChecked="{Binding IsChecked, Mode=TwoWay}" />
        </Border>
    </DataTemplate>

    --Rob

    Thursday, March 06, 2014 6:09 PM
    Owner
  • That worked! Many thanks...

    Randy

    Thursday, March 06, 2014 9:30 PM