locked
Один и тот же столбец для всех элементов Pivot RRS feed

  • Вопрос

  • Всем привет!

    Подскажите, пожалуйста, можно ли сделать, чтобы при листании вправо-влево Pivot слева всегда был один и тот же столбец? Типа нумерации:

    1.

    2.

    3. 

    И т.д.

    10 ноября 2013 г. 17:13

Ответы

  • Открываете Blend, создаете новый WP проект. Там будет создана страница, перетаскиваете на неё PivotItem, нажимаете на него правой кнопкой мышки, дальше:

    -> Edit Template

    -> edit a copy

    -> появляется окно, там предложит создать стиль и его имя и в каком документе его разместить, в общем, можете нажать сразу ОК

    -> что бы посмотреть код, нажмите на тот же pivotItem или любой элемент на странице и нажмите View source. 

    -> на странице находите созданный выше стиль  для PivotItem и он будет иметь такой вид:

    <Style x:Key="PivotItemStyle1" TargetType="phone:PivotItem">
    			<Setter Property="Background" Value="Transparent"/>
    			<Setter Property="Margin" Value="{StaticResource PivotItemMargin}"/>
    			<Setter Property="Padding" Value="0"/>
    			<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    			<Setter Property="VerticalContentAlignment" Value="Stretch"/>
    			<Setter Property="Template">
    				<Setter.Value>
    					<ControlTemplate TargetType="phone:PivotItem">
    						<Grid Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
    							<VisualStateManager.VisualStateGroups>
    								<VisualStateGroup x:Name="Pivot">
    									<VisualState x:Name="Right"/>
    									<VisualState x:Name="Left"/>
    									<VisualState x:Name="Center"/>
    								</VisualStateGroup>
    							</VisualStateManager.VisualStateGroups>
    							<ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
    						</Grid>
    					</ControlTemplate>
    				</Setter.Value>
    			</Setter>
    		</Style>

    -> исследуем этот стиль, в нем лежит 1 ContentPresenter, это и есть контент пайвот айтема. Теперь просто оберните его в Grid с колонками и положите в 1 колонку нужный Вам список часов, а в соседнюю колонку этот ContentPresenter. 

    Всё.

    На всякий случай Вот Вам конечный стиль PivotItem, но я как заглушку в первую колонку кинул StackPanel  с текстблоками, замените его на нужную Вам вещь.

    <Style x:Key="PivotItemStyle1" TargetType="phone:PivotItem">
                <Setter Property="Background" Value="Transparent"/>
                <Setter Property="Margin" Value="{StaticResource PivotItemMargin}"/>
                <Setter Property="Padding" Value="0"/>
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                <Setter Property="VerticalContentAlignment" Value="Stretch"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="phone:PivotItem">
                            <Grid Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="Pivot">
                                        <VisualState x:Name="Right"/>
                                        <VisualState x:Name="Left"/>
                                        <VisualState x:Name="Center"/>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition />
                                    </Grid.ColumnDefinitions>
                                    <StackPanel>
                                        <TextBlock Text="1 " Foreground="Red"/>
                                        <TextBlock Text="2 " Foreground="Red"/>
                                        <TextBlock Text="3 " Foreground="Red"/>
                                        <TextBlock Text="4 " Foreground="Red"/>
                                        <TextBlock Text="5 " Foreground="Red"/>
                                    </StackPanel>
                                    <ContentPresenter Grid.Column="1"
                                                      ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                    
                                </Grid>
                                
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

    17 ноября 2013 г. 21:44

Все ответы

  • Можете какой-то набросок сделать или более детальное описание? Не совсем ясно что и для чего Вам это нужно.
    15 ноября 2013 г. 8:22
  • Вот схематичное изображение того, что мне надо.
    Представим, что это Pivot. Каждый столбец Item - это страница Pivot.

    Как сделать так, чтобы столбец с цифрами был на каждой странице Pivot?

    Чтобы не вставлять на каждую страницу этот столбец, а вставить 1 раз? 

    17 ноября 2013 г. 18:02
  • Открываете Blend, создаете новый WP проект. Там будет создана страница, перетаскиваете на неё PivotItem, нажимаете на него правой кнопкой мышки, дальше:

    -> Edit Template

    -> edit a copy

    -> появляется окно, там предложит создать стиль и его имя и в каком документе его разместить, в общем, можете нажать сразу ОК

    -> что бы посмотреть код, нажмите на тот же pivotItem или любой элемент на странице и нажмите View source. 

    -> на странице находите созданный выше стиль  для PivotItem и он будет иметь такой вид:

    <Style x:Key="PivotItemStyle1" TargetType="phone:PivotItem">
    			<Setter Property="Background" Value="Transparent"/>
    			<Setter Property="Margin" Value="{StaticResource PivotItemMargin}"/>
    			<Setter Property="Padding" Value="0"/>
    			<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    			<Setter Property="VerticalContentAlignment" Value="Stretch"/>
    			<Setter Property="Template">
    				<Setter.Value>
    					<ControlTemplate TargetType="phone:PivotItem">
    						<Grid Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
    							<VisualStateManager.VisualStateGroups>
    								<VisualStateGroup x:Name="Pivot">
    									<VisualState x:Name="Right"/>
    									<VisualState x:Name="Left"/>
    									<VisualState x:Name="Center"/>
    								</VisualStateGroup>
    							</VisualStateManager.VisualStateGroups>
    							<ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
    						</Grid>
    					</ControlTemplate>
    				</Setter.Value>
    			</Setter>
    		</Style>

    -> исследуем этот стиль, в нем лежит 1 ContentPresenter, это и есть контент пайвот айтема. Теперь просто оберните его в Grid с колонками и положите в 1 колонку нужный Вам список часов, а в соседнюю колонку этот ContentPresenter. 

    Всё.

    На всякий случай Вот Вам конечный стиль PivotItem, но я как заглушку в первую колонку кинул StackPanel  с текстблоками, замените его на нужную Вам вещь.

    <Style x:Key="PivotItemStyle1" TargetType="phone:PivotItem">
                <Setter Property="Background" Value="Transparent"/>
                <Setter Property="Margin" Value="{StaticResource PivotItemMargin}"/>
                <Setter Property="Padding" Value="0"/>
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                <Setter Property="VerticalContentAlignment" Value="Stretch"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="phone:PivotItem">
                            <Grid Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="Pivot">
                                        <VisualState x:Name="Right"/>
                                        <VisualState x:Name="Left"/>
                                        <VisualState x:Name="Center"/>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition />
                                    </Grid.ColumnDefinitions>
                                    <StackPanel>
                                        <TextBlock Text="1 " Foreground="Red"/>
                                        <TextBlock Text="2 " Foreground="Red"/>
                                        <TextBlock Text="3 " Foreground="Red"/>
                                        <TextBlock Text="4 " Foreground="Red"/>
                                        <TextBlock Text="5 " Foreground="Red"/>
                                    </StackPanel>
                                    <ContentPresenter Grid.Column="1"
                                                      ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                    
                                </Grid>
                                
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

    17 ноября 2013 г. 21:44