Question

微软用于其Windows 7手机的unit converter starter kit生成键盘，下面再现了XAML。显然是大量的复制和粘贴。

问题：

1）MSFT是否认真写这种方式？
2）真的?????
3）是否有一种理智的方式来写这样的东西？
4）有没有人知道代码示例说明了这种理智的方式？

   <StackPanel Orientation="Vertical">
        <TextBlock x:Name="textBlockCategory" 
                   Text="{Binding Path=UppercasedCategory}"
                   Margin="23,24,0,0"
                   FontSize="{StaticResource PhoneFontSizeMedium}"  
                   FontFamily="{StaticResource PhoneFontFamilyNormal}" 
                   Foreground="{StaticResource PhoneForegroundBrush}" />
        <StackPanel x:Name="spInput" 
                    Orientation="Vertical" 
                    Margin="0,0,24,0" >
            <TextBlock x:Name="textBlockInputValue" 
                       Text="{Binding Path=UpperUnitValue}"
                       Height="80" Margin="0,2,0,0" 
                       TextAlignment="Right" 
                       FontSize="{StaticResource PhoneFontSizeExtraExtraLarge}" 
                       FontFamily="{StaticResource PhoneFontFamilyNormal}" 
                       Foreground="{StaticResource PhoneForegroundBrush}" />
            <TextBlock x:Name="textBlockInputUnit" 
                       Text="{Binding Path=UpperUnitName}"
                       Height="34" TextAlignment="Right" Margin="0,2,0,0" 
                       FontSize="{StaticResource PhoneFontSizeMediumLarge}" 
                       Foreground="{StaticResource PhoneAccentBrush}" 
                       FontFamily="{StaticResource PhoneFontFamilySemiBold}" />
        </StackPanel>
        <StackPanel x:Name="spResult" 
                    Orientation="Vertical" 
                    Margin="0,-4,24,0" >
            <TextBlock x:Name="textBlockResultValue" 
                        Text="{Binding Path=LowerUnitValue}"
                       Height="80" TextAlignment="Right" Margin="0,-4,0,0" 
                       FontSize="{StaticResource PhoneFontSizeExtraExtraLarge}" 
                       FontFamily="{StaticResource PhoneFontFamilyNormal}" 
                       Foreground="{StaticResource PhoneSubtleBrush}"/>
            <TextBlock x:Name="textBlockResultUnit" 
                       Text="{Binding Path=LowerUnitName}"
                       Height="34" TextAlignment="Right" Margin="0,2,0,0" 
                       FontSize="{StaticResource PhoneFontSizeMediumLarge}" 
                       Foreground="{StaticResource PhoneAccentBrush}" 
                       FontFamily="{StaticResource PhoneFontFamilySemiBold}" />
        </StackPanel>
        <StackPanel x:Name="spSummary" >
            <TextBlock x:Name="textBlockSummary"
                       Text="{Binding Path=Summary}"
                       Height="30" TextAlignment="Center" Margin="0,18,0,0" 
                       FontSize="{StaticResource PhoneFontSizeNormal}"
                       Foreground="{StaticResource PhoneSubtleBrush}" 
                       FontFamily="{StaticResource PhoneFontFamilyNormal}" />
        </StackPanel>
        <StackPanel x:Name="spKeypad" Orientation="Vertical" HorizontalAlignment="Right">
            <StackPanel x:Name="spKeypadRow1" Orientation="Horizontal">
                <Button x:Name="btnKeypadKey7"  
                        Content="7" 
                        Background="{StaticResource PhoneInactiveBrush}" 
                        Foreground="{StaticResource PhoneForegroundBrush}"  
                        Height="84" Margin="6" Width="108"
                        Style="{StaticResource KeypadButtonStyle}" 
                        FontFamily="{StaticResource PhoneFontFamilyNormal}" 
                        FontSize="{StaticResource KeypadButtonFontSize}" 
                        Click="OnClickNumber" />
                <Button x:Name="btnKeypadKey8"  
                        Content="8" 
                        Background="{StaticResource PhoneInactiveBrush}" 
                        Foreground="{StaticResource PhoneForegroundBrush}"  
                        Height="84" Margin="6" Width="108"
                        Style="{StaticResource KeypadButtonStyle}" 
                        FontFamily="{StaticResource PhoneFontFamilyNormal}" 
                        FontSize="{StaticResource KeypadButtonFontSize}" 
                        Click="OnClickNumber" />
                <Button x:Name="btnKeypadKey9"  
                        Content="9" 
                        Background="{StaticResource PhoneInactiveBrush}" 
                        Foreground="{StaticResource PhoneForegroundBrush}"  
                        Height="84" Margin="6" Width="108"
                        Style="{StaticResource KeypadButtonStyle}" 
                        FontFamily="{StaticResource PhoneFontFamilyNormal}" 
                        FontSize="{StaticResource KeypadButtonFontSize}" 
                        Click="OnClickNumber" />
                <Button x:Name="btnKeypadKeyCancel" 
                        Height="84" Margin="6" Width="108" 
                        Style="{StaticResource btnKeypadKeyCancelStyle}" 
                        Background="{StaticResource PhoneDisabledBrush}" 
                        FontSize="{StaticResource PhoneFontSizeExtraLarge}" 
                        FontFamily="{StaticResource PhoneFontFamilyNormal}"  
                        Click="OnClickClear" />
            </StackPanel>
            <StackPanel x:Name="spKeypadRow2" Orientation="Horizontal">
                <Button x:Name="btnKeypadKey4"  
                        Content="4" 
                        Background="{StaticResource PhoneInactiveBrush}"     
                        Foreground="{StaticResource PhoneForegroundBrush}"          
                        Height="84" Margin="6" Width="108" 
                        Style="{StaticResource KeypadButtonStyle}" 
                        FontSize="{StaticResource KeypadButtonFontSize}" 
                        FontFamily="{StaticResource PhoneFontFamilyNormal}" 
                        Click="OnClickNumber" />
                <Button x:Name="btnKeypadKey5"  
                        Content="5" 
                        Background="{StaticResource PhoneInactiveBrush}"     
                        Foreground="{StaticResource PhoneForegroundBrush}"          
                        Height="84" Margin="6" Width="108" 
                        Style="{StaticResource KeypadButtonStyle}" 
                        FontSize="{StaticResource KeypadButtonFontSize}" 
                        FontFamily="{StaticResource PhoneFontFamilyNormal}" 
                        Click="OnClickNumber" />
                <Button x:Name="btnKeypadKey6"  
                        Content="6" 
                        Background="{StaticResource PhoneInactiveBrush}"     
                        Foreground="{StaticResource PhoneForegroundBrush}"          
                        Height="84" Margin="6" Width="108" 
                        Style="{StaticResource KeypadButtonStyle}" 
                        FontSize="{StaticResource KeypadButtonFontSize}" 
                        FontFamily="{StaticResource PhoneFontFamilyNormal}" 
                        Click="OnClickNumber" />
                <Button x:Name="btnKeypadKeyBack"   
                        Height="84" Margin="6" Width="108"  
                        Style="{StaticResource btnKeypadKeyBackStyle}" 
                        Background="{StaticResource PhoneDisabledBrush}" 
                        FontSize="{StaticResource PhoneFontSizeExtraLarge}" 
                        FontFamily="{StaticResource PhoneFontFamilyNormal}"  
                        Click="OnClickBack" />
            </StackPanel>
            <StackPanel x:Name="spKeypadRow3" Orientation="Horizontal">
                <Button x:Name="btnKeypadKey1"      
                        Background="{StaticResource PhoneInactiveBrush}"    
                        Foreground="{StaticResource PhoneForegroundBrush}"      
                        Height="84" Margin="6" Width="108" 
                        Content="1" 
                        Style="{StaticResource KeypadButtonStyle}" 
                        FontSize="{StaticResource KeypadButtonFontSize}" 
                        FontFamily="{StaticResource PhoneFontFamilyNormal}" 
                        Click="OnClickNumber" />
                <Button x:Name="btnKeypadKey2"      
                        Content="2" 
                        Background="{StaticResource PhoneInactiveBrush}"    
                        Foreground="{StaticResource PhoneForegroundBrush}"      
                        Height="84" Margin="6" Width="108" 
                        Style="{StaticResource KeypadButtonStyle}" 
                        FontSize="{StaticResource KeypadButtonFontSize}" 
                        FontFamily="{StaticResource PhoneFontFamilyNormal}" 
                        Click="OnClickNumber" />
                <Button x:Name="btnKeypadKey3"      
                        Content="3" 
                        Background="{StaticResource PhoneInactiveBrush}"    
                        Foreground="{StaticResource PhoneForegroundBrush}"      
                        Height="84" Margin="6" Width="108" 
                        Style="{StaticResource KeypadButtonStyle}" 
                        FontSize="{StaticResource KeypadButtonFontSize}" 
                        FontFamily="{StaticResource PhoneFontFamilyNormal}" 
                        Click="OnClickNumber" />
                <Button x:Name="btnKeypadKeyPlusMinus"  
                        Height="84" Margin="6" Width="108"  
                        Style="{StaticResource btnKeypadPlusMinusStyle}" 
                        Background="{StaticResource PhoneDisabledBrush}" 
                        FontSize="{StaticResource PhoneFontSizeExtraLarge}" 
                        FontFamily="{StaticResource PhoneFontFamilyNormal}" 
                        Click="OnClickSign" />
            </StackPanel>
            <StackPanel x:Name="spKeypadRow4" Orientation="Horizontal">
                <Button x:Name="btnKeypadKey0"  
                        Content="0" 
                        Background="{StaticResource PhoneInactiveBrush}"     
                        Foreground="{StaticResource PhoneForegroundBrush}"  
                        Height="84" Margin="6" Width="228" 
                        Style="{StaticResource KeypadButtonStyle}" 
                        FontSize="{StaticResource KeypadButtonFontSize}" 
                        FontFamily="{StaticResource PhoneFontFamilyNormal}" 
                        Click="OnClickNumber" />
                <Button x:Name="btnKeypadKeyPoint"  
                        Content="{Binding Path=CurrentCulture.NumberFormat.NumberDecimalSeparator, Source={StaticResource Resources}}" 
                        Background="{StaticResource PhoneInactiveBrush}" 
                        Foreground="{StaticResource PhoneForegroundBrush}"  
                        Height="84" Margin="6" Width="108"  
                        Style="{StaticResource btnKeypadPointStyle}" 
                        FontSize="{StaticResource KeypadButtonFontSize}" 
                        FontFamily="{StaticResource PhoneFontFamilyNormal}"  
                        Click="OnClickNumber" />
                <Button x:Name="btnKeypadSwitchSourceTargetUnit" 
                        Height="84" Margin="6" Width="108"
                        Style="{StaticResource KeypadButtonStyle}" 
                        Background="{StaticResource PhoneDisabledBrush}" 
                        FontSize="{StaticResource PhoneFontSizeExtraLarge}" 
                        FontFamily="{StaticResource PhoneFontFamilyNormal}"
                        Click="OnClickSourceTargetUnit">
                    <Image Source= "{Binding ConversionImageSource}"/>
                </Button>
            </StackPanel>
        </StackPanel>
    </StackPanel>

Answer 1

如果您要模仿相同类型的设计，我肯定会使用样式来减少所有这些按钮的重复。看起来他们已经通过创建KeypadButtonStyle开始了这条道路，但是你还可以构建更多，特别是如果你使用基于其他样式的样式。

您还可以使用网格而不是堆栈面板来完成布局。

在使用代码和循环构建这个xaml方面你可以做到，但我强烈建议学习Expression Blend，它不会花费你很长时间来创建你需要的xaml（包括样式优化）。

Answer 2

XAML是一种非常强大的语言，但正如你所正确指出的那样，它本身就是冗长而丑陋的。这是我在DRY（不要重复自己）时所见过的最糟糕的语言。也就是说，其他人所做的所有评论也是如此。样式有很多帮助。 Blend有助于实现更多目标。

我的第一印象和你的一样，虽然我已经意识到它确实是一种非常强大和有用的语言，但我从未停止过认为它的部分设计确实很差。这是一个例子;您无法指定要数据绑定的对象的数据类型的事实是另一个。

所有这一切，学习XAML确实值得。你可以使用XAML做的事情，这在HTML或WinForms或Java中是不可能的。它是一种非常非常强大的UI描述语言。只要把它当成它，用力吞咽，忘记你所学到的关于良好编码风格的一切，你就能创造出一些令人惊叹的用户界面。

Answer 3

不，如果您不想，则无需复制和粘贴XAML代码。 XAML只是一个创建对象和设置属性的对象图。您在XAML中编写的任何代码也可以在程序上编写（如果您愿意，可以在for循环中编写）。

Answer 4

XAML中一个非常强大的元素是ItemsControl。有了它，您可以通过简单地使您的UI数据驱动和灵活来避免许多重复标记结构。在运行时，您可以分配数据源，然后ItemsControl将动态扩展模板，以根据所分配的数据构建UI。

http://msdn.microsoft.com/en-us/library/system.windows.controls.itemscontrol(VS.95).aspx

使用XAML时避免复制和粘贴

4 个答案: