Xaml Windows Phone 8.1的时钟布局。应用程序

我想为Windows Phone 8.1应用程序设计此应用程序：

我用硬代码来实现：

            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Grid Grid.Row="1" Margin="0,0,0,0" HorizontalAlignment="Center" VerticalAlignment="Center">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>



                    <Common:RingSlice InnerRadius="100" Radius="150" Fill="White" StartAngle="0" EndAngle="358"/>
                    <Common:RingSlice InnerRadius="100" Radius="115" Fill="Maroon" StartAngle="-0.3" EndAngle="356.9"/>

                    <Grid Margin="0,0,0,0" RenderTransformOrigin="0.5, 0.5">
                        <Grid.RenderTransform>
                            <CompositeTransform Rotation="10.88" CenterX="0" CenterY="0" ScaleX="1.1" ScaleY="1.1"/>
                        </Grid.RenderTransform>
                        <TextBlock VerticalAlignment="Top" HorizontalAlignment="Center" FontSize="7" RenderTransformOrigin="0.5,0.5">7:30
                            <TextBlock.RenderTransform>
                                <RotateTransform Angle="270"/>
                            </TextBlock.RenderTransform></TextBlock>
                    </Grid>

                    <Grid Margin="0,0,0,0" RenderTransformOrigin="0.5, 0.5">
                        <Grid.RenderTransform>
                            <CompositeTransform Rotation="32.56" CenterX="0" CenterY="0" ScaleX="1.1" ScaleY="1.1"/>
                        </Grid.RenderTransform>
                        <TextBlock VerticalAlignment="Top" HorizontalAlignment="Center" FontSize="7" RenderTransformOrigin="0.5,0.5">8:30
                            <TextBlock.RenderTransform>
                                <RotateTransform Angle="270"/>
                            </TextBlock.RenderTransform></TextBlock>
                    </Grid>

                    <Grid Margin="0,0,0,0" RenderTransformOrigin="0.5, 0.5">
                        <Grid.RenderTransform>
                            <CompositeTransform Rotation="74.18" CenterX="0" CenterY="0" ScaleX="1.1" ScaleY="1.1"/>
                        </Grid.RenderTransform>
                        <TextBlock VerticalAlignment="Top" HorizontalAlignment="Center" FontSize="7" RenderTransformOrigin="0.5,0.5">10:30
                            <TextBlock.RenderTransform>
                                <RotateTransform Angle="270"/>
                            </TextBlock.RenderTransform></TextBlock>
                    </Grid>

                    <Grid Margin="0,0,0,0" RenderTransformOrigin="0.5, 0.5">
                        <Grid.RenderTransform>
                            <CompositeTransform Rotation="115.71" CenterX="0" CenterY="0" ScaleX="1.1" ScaleY="1.1"/>
                        </Grid.RenderTransform>
                        <TextBlock VerticalAlignment="Top" HorizontalAlignment="Center" FontSize="7" RenderTransformOrigin="0.5,0.5">12:30
                            <TextBlock.RenderTransform>
                                <RotateTransform Angle="270"/>
                            </TextBlock.RenderTransform></TextBlock>
                    </Grid>

                    <Grid Margin="0,0,0,0" RenderTransformOrigin="0.5, 0.5">
                        <Grid.RenderTransform>
                            <CompositeTransform Rotation="137.47" CenterX="0" CenterY="0" ScaleX="1.1" ScaleY="1.1"/>
                        </Grid.RenderTransform>
                        <TextBlock VerticalAlignment="Top" HorizontalAlignment="Center" FontSize="7" RenderTransformOrigin="0.5,0.5">13:30
                            <TextBlock.RenderTransform>
                                <RotateTransform Angle="270"/>
                            </TextBlock.RenderTransform></TextBlock>
                    </Grid>

                    <Grid Margin="0,0,0,0" RenderTransformOrigin="0.5, 0.5">
                        <Grid.RenderTransform>
                            <CompositeTransform Rotation="169.12" CenterX="0" CenterY="0" ScaleX="1.1" ScaleY="1.1"/>
                        </Grid.RenderTransform>
                        <TextBlock VerticalAlignment="Top" HorizontalAlignment="Center" FontSize="7" RenderTransformOrigin="0.5,0.5">15:00
                            <TextBlock.RenderTransform>
                                <RotateTransform Angle="270"/>
                            </TextBlock.RenderTransform></TextBlock>
                    </Grid>

                    <Grid Margin="0,0,0,0" RenderTransformOrigin="0.5, 0.5">
                        <Grid.RenderTransform>
                            <CompositeTransform Rotation="200.76" CenterX="0" CenterY="0" ScaleX="1.1" ScaleY="1.1"/>
                        </Grid.RenderTransform>
                        <TextBlock VerticalAlignment="Top" HorizontalAlignment="Center" FontSize="7" RenderTransformOrigin="0.5,0.5">16:30
                            <TextBlock.RenderTransform>
                                <RotateTransform Angle="90"/>
                            </TextBlock.RenderTransform></TextBlock>
                    </Grid>

                    <Grid Margin="0,0,0,0" RenderTransformOrigin="0.5, 0.5">
                        <Grid.RenderTransform>
                            <CompositeTransform Rotation="232.41" CenterX="0" CenterY="0" ScaleX="1.1" ScaleY="1.1"/>
                        </Grid.RenderTransform>
                        <TextBlock VerticalAlignment="Top" HorizontalAlignment="Center" FontSize="7" RenderTransformOrigin="0.5,0.5">18:00
                            <TextBlock.RenderTransform>
                                <RotateTransform Angle="90"/>
                            </TextBlock.RenderTransform></TextBlock>
                    </Grid>

                    <Grid Margin="0,0,0,0" RenderTransformOrigin="0.5, 0.5">
                        <Grid.RenderTransform>
                            <CompositeTransform Rotation="254.18" CenterX="0" CenterY="0" ScaleX="1.1" ScaleY="1.1"/>
                        </Grid.RenderTransform>
                        <TextBlock VerticalAlignment="Top" HorizontalAlignment="Center" FontSize="7" RenderTransformOrigin="0.5,0.5">19:00
                            <TextBlock.RenderTransform>
                                <RotateTransform Angle="90"/>
                            </TextBlock.RenderTransform></TextBlock>
                    </Grid>

                    <Grid Margin="0,0,0,0" RenderTransformOrigin="0.5, 0.5">
                        <Grid.RenderTransform>
                            <CompositeTransform Rotation="275.94" CenterX="0" CenterY="0" ScaleX="1.1" ScaleY="1.1"/>
                        </Grid.RenderTransform>
                        <TextBlock VerticalAlignment="Top" HorizontalAlignment="Center" FontSize="7" RenderTransformOrigin="0.5,0.5">20:00
                            <TextBlock.RenderTransform>
                                <RotateTransform Angle="90"/>
                            </TextBlock.RenderTransform></TextBlock>
                    </Grid>

                    <Grid Margin="0,0,0,0" RenderTransformOrigin="0.5, 0.5">
                        <Grid.RenderTransform>
                            <CompositeTransform Rotation="307.59" CenterX="0" CenterY="0" ScaleX="1.1" ScaleY="1.1"/>
                        </Grid.RenderTransform>
                        <TextBlock VerticalAlignment="Top" HorizontalAlignment="Center" FontSize="7" RenderTransformOrigin="0.5,0.5">21:30
                            <TextBlock.RenderTransform>
                                <RotateTransform Angle="90"/>
                            </TextBlock.RenderTransform></TextBlock>
                    </Grid>


                    <Grid Margin="0,0,0,0" RenderTransformOrigin="0.5, 0.5">
                        <Grid.RenderTransform>
                            <CompositeTransform Rotation="339.24" CenterX="0" CenterY="0" ScaleX="1.1" ScaleY="1.1"/>
                        </Grid.RenderTransform>
                        <TextBlock VerticalAlignment="Top" HorizontalAlignment="Center" FontSize="7" RenderTransformOrigin="0.5,0.5">23:00
                            <TextBlock.RenderTransform>
                                <RotateTransform Angle="90"/>
                            </TextBlock.RenderTransform></TextBlock>
                    </Grid>

                   </Grid>
            </Grid>

7:30
8:30
10:30
12:30
13:30
15:00
16:30
18:00
19:00
20:00
21:30
23:00

但我想添加带有数据绑定的小时数的文本块，如下所示：

                    <ItemsControl Name="cig" DataContext="{Binding FirstGroup}" d:DataContext="{Binding Groups[0], Source={d:DesignData Source=/DataModel/SampleData.json, Type=data:SampleDataSource}}" ItemsSource="{Binding Items}">
                            <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                    <Grid Margin="0,0,0,0" RenderTransformOrigin="0.5, 0.5">
                                        <Grid.RenderTransform>
                                        <CompositeTransform Rotation="{Binding Angle}" CenterX="0" CenterY="0" ScaleX="1.1" ScaleY="1.1"/>
                                        </Grid.RenderTransform>
                                        <TextBlock VerticalAlignment="Top" HorizontalAlignment="Center" FontSize="7" RenderTransformOrigin="0.5,0.5" Text="{Binding Title}">
                                            <TextBlock.RenderTransform>
                                                <RotateTransform Angle="90"/>
                                            </TextBlock.RenderTransform></TextBlock>
                                    </Grid>
                            </DataTemplate>
                            </ItemsControl.ItemTemplate>
                    </ItemsControl>

我尝试使用上述代码执行此操作，但文本块的对齐方式不正确，如下图所示：

---

请帮帮我

您确实需要发布更多的XAML（即

ItemsControl

parent）。但基本上，问题是您的ItemsControl不允许扩展——您以某种方式限制了它（可能在自动大小的网格行或列中？），我只是尝试将ItemsControl直接添加到页面，而没有其他父控件，并且对齐方式是相同的。