locked
Problems setting width of button RRS feed

  • Question

  • Using a initial collection project template, the adding a couple of other new pages, I am attempting to create a snap view which as 4 buttons along side each other, the problem is that I am unable to change the width. Even thought the XAML states the width has been set to 40, for each button, the display still remains at the default size of 75. How can I make my setting take effect on the final display, or is a button hard coded to 75 in windows 8 Metro, or is this a problem with this release which will get addressed before the beta.

    Thanks.

    Tuesday, December 27, 2011 2:50 PM

Answers

  • Hi! Apparently making buttons that small is disabled by default. However, you can achieve a similar effect by using a control template style.

     

    <UserControl.Resources>        
        <!-- Small button style -->
            <Style x:Key="SmallButtonStyle" TargetType="Button">
                <Setter Property="MinWidth" Value="40" />
                <Setter Property="Width" Value="40" />
                <Setter Property="Height" Value="36" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <Canvas x:Name="SmallButton">
                                
                                <!-- Animations for different states -->
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal"/>
                                        <VisualState x:Name="MouseOver">
                                            <Storyboard>
                                                <DoubleAnimation Duration="0" To=".4" 
                                                                 Storyboard.TargetProperty="(UIElement.Opacity)" 
                                                                 Storyboard.TargetName="SmallButtonMouseOver" />
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Pressed">
                                            <Storyboard>
                                                <DoubleAnimation Duration="0" To="1" 
                                                                 Storyboard.TargetProperty="(UIElement.Opacity)" 
                                                                 Storyboard.TargetName="SmallButtonPressed" />
                                                <ColorAnimation Duration="0" To="Black" 
                                                                Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" 
                                                                Storyboard.TargetName="SmallButtonContent" />
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Disabled">
                                            <Storyboard>
                                                <DoubleAnimation Duration="0" To="0.35" 
                                                                 Storyboard.TargetProperty="(UIElement.Opacity)" 
                                                                 Storyboard.TargetName="SmallButton" />
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                
                                <!-- Button contents -->
                                <Grid Width="40" Height="36">
                                    <!-- Background for mouse over -->
                                    <Grid x:Name="SmallButtonMouseOver" Margin="3,3,3,3" Background="LightGray" Opacity="0"/>
                                    
                                    <!-- Background for pressed -->
                                    <Grid x:Name="SmallButtonPressed" Margin="3,3,3,3" Background="White" Opacity="0"/>
                                    
                                    <!-- Text in the button -->
                                    <TextBlock x:Name="SmallButtonContent" Foreground="White" Text="{TemplateBinding Content}" TextAlignment="Center" VerticalAlignment="Center"/>
                                                                    
                                    <!-- Button Border -->
                                    <Rectangle Stroke="White" StrokeThickness="2" Margin="3,3,3,3"/>
                                </Grid>
    
                            </Canvas>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
    </UserControl.Resources>
    


    Then, create a button and assign it to the small button style, and place the button where you want it.

    <Button Content="Hi!" Style="{StaticResource SmallButtonStyle}"/>  
    

    Feel free to edit the style to whatever you want. I've got it so it looks pretty close to the default button. Hope this helps you!

     

     

    Wednesday, December 28, 2011 3:04 AM