In my XAML can I make a ComboBox and multiple ComboBoxItems into a single Static or Dynamic Resource?

Question

I have the following XAML snippet appearing multiple times in my XMAL file. Is it possible to combine the ComboBox and ComboBoxItems into a single Static or Dynamic Resource to save room and simplify maintenance issues?

        <Button>
            <Canvas HorizontalAlignment="Left" VerticalAlignment="Top">
                <ComboBox Width="34" FontSize="13" Margin="0" Padding="2,0,0,0">
                    <ComboBoxItem Content="01"></ComboBoxItem>
                    <ComboBoxItem Content="02"></ComboBoxItem>
                    <ComboBoxItem Content="03"></ComboBoxItem>
                    <ComboBoxItem Content="04"></ComboBoxItem>
                    <ComboBoxItem Content="05"></ComboBoxItem>
                    <ComboBoxItem Content="06"></ComboBoxItem>
                    <ComboBoxItem Content="08"></ComboBoxItem>
                    ....... ALL THE WAY TO 100 Items......                     
                    <ComboBoxItem Content="100"></ComboBoxItem>
                </ComboBox>
            </Canvas>    
        </Button>

Answer 1

Add this part to your resource dictionary...

<Style x:Key="NumberComboButton" TargetType="Button">
    <Setter Property="Width" Value="45"/>
    <Setter Property="Height" Value="40"/>
    <Setter Property="Background" Value="#FF1F3B53"/>
    <Setter Property="Foreground" Value="#FF000000"/>
    <Setter Property="Padding" Value="3"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="BorderBrush">
        <Setter.Value>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFA3AEB9" Offset="0"/>
                <GradientStop Color="#FF8399A9" Offset="0.375"/>
                <GradientStop Color="#FF718597" Offset="0.375"/>
                <GradientStop Color="#FF617584" Offset="1"/>
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" Storyboard.TargetName="BackgroundAnimation" Storyboard.TargetProperty="Opacity" To="1"/>
                                    <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" To="#F2FFFFFF"/>
                                    <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" To="#CCFFFFFF"/>
                                    <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" To="#7FFFFFFF"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ColorAnimation Duration="0" Storyboard.TargetName="Background" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="#FF6DBDD1"/>
                                    <DoubleAnimation Duration="0" Storyboard.TargetName="BackgroundAnimation" Storyboard.TargetProperty="Opacity" To="1"/>
                                    <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" To="#D8FFFFFF"/>
                                    <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" To="#C6FFFFFF"/>
                                    <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" To="#8CFFFFFF"/>
                                    <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" To="#3FFFFFFF"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity" To=".55"/>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="FocusStates">
                            <VisualState x:Name="Focused">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity" To="1"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unfocused" />
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Border x:Name="Background" CornerRadius="3" Background="White" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">
                        <Grid Background="{TemplateBinding Background}"  Margin="1">
                            <Border Opacity="0"  x:Name="BackgroundAnimation" Background="#FF448DCA" />
                            <Rectangle x:Name="BackgroundGradient" >
                                <Rectangle.Fill>
                                    <LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1">
                                        <GradientStop Color="#FFFFFFFF" Offset="0" />
                                        <GradientStop Color="#F9FFFFFF" Offset="0.375" />
                                        <GradientStop Color="#E5FFFFFF" Offset="0.625" />
                                        <GradientStop Color="#C6FFFFFF" Offset="1" />
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                            <ComboBox Width="34" FontSize="13" Margin="0" Padding="2,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Center">
                                <ComboBoxItem Content="01"></ComboBoxItem>
                                <ComboBoxItem Content="02"></ComboBoxItem>
                                <ComboBoxItem Content="03"></ComboBoxItem>
                                <ComboBoxItem Content="04"></ComboBoxItem>
                                <ComboBoxItem Content="05"></ComboBoxItem>
                                <ComboBoxItem Content="06"></ComboBoxItem>
                                <ComboBoxItem Content="08"></ComboBoxItem>
                                <ComboBoxItem Content="100"></ComboBoxItem>
                            </ComboBox>
                        </Grid>
                    </Border>
                    <ContentPresenter
                          x:Name="contentPresenter"
                          Content="{TemplateBinding Content}"
                          ContentTemplate="{TemplateBinding ContentTemplate}"
                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                          Margin="{TemplateBinding Padding}"/>
                    <Rectangle x:Name="DisabledVisualElement" RadiusX="3" RadiusY="3" Fill="#FFFFFFFF" Opacity="0" IsHitTestVisible="false" />
                    <Rectangle x:Name="FocusVisualElement" RadiusX="2" RadiusY="2" Margin="1" Stroke="#FF6DBDD1" StrokeThickness="1" Opacity="0" IsHitTestVisible="false" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

and use it in your xaml like this..."

     <Button Style="{StaticResource NumberComboButton}"/>            

I've edited this to provide the complete template instead of just the idea giver.

I removed your Canvas, because Canvases do not layout their children.

To make the button taller/wider you need to change the following properties:

    <Setter Property="Width" Value="45"/>

    <Setter Property="Height" Value="40"/>

Setting these values when specifying the Button in the XAML will overwrite the values specified in the style.

Finally, to change how the combo-box is aligned in your button, change the alignment in the combo-box - you can find the combo-box inside the button's grid (past the visual state manager stuff).

You can learn more here...

http://msdn.microsoft.com/en-us/library/cc903963(v=vs.95).aspx - how to customize a button http://msdn.microsoft.com/en-us/library/cc278069(v=vs.95).aspx - button template

Answer 2

No need to declare so many comboboxItem's instances. Simply declare resource to provide ItemsSource to your comboBox (you can use ObjectDataProvider)

Declare this resource in UserControl, Window or App resource (wherever you feel like):

<ObjectDataProvider x:Key="EnumerableRange"
                    xmlns:sys="clr-namespace:System;assembly=mscorlib"
                    xmlns:linq="clr-namespace:System.Linq;assembly=System.Core"
                    ObjectType="{x:Type linq:Enumerable}" MethodName="Range">
     <ObjectDataProvider.MethodParameters>
         <sys:Int32>1</sys:Int32>
         <sys:Int32>100</sys:Int32>
     </ObjectDataProvider.MethodParameters>
 </ObjectDataProvider>

you can use this for multiple comboboxes by setting ItemsSource like this:

<ComboBox ItemsSource="{Binding Source={StaticResource EnumerableRange}}"/>