locked
Opacity для PanningTitleLayer элемента Panorama RRS feed

  • Вопрос

  • Если у ApplicationBar задать Opacity="0.5", то фон у ApplicationBar становится полупрозрачным. Как сделать такое же поведение и цвет у фона PanningTitleLayer элемента Panorama? И вел себя так же, как ApplicationBar при значении Opacity равном 1, 0.5 или 0.




    18 июля 2012 г. 8:03

Все ответы

  • Добрый день!

    Отредактировать шаблон для PanningTitleLayer можно легко в Expression Blend. Выделите в списке объектов вашу панораму, правой кнопкой мыши - EditTemplate. Введите название и можете приступать к редактированию отдельных элементов. Если вы зададите  Opacity="0.5" у PanningTitleLayer то полупрозрачным станет и текст заголовка. Если хотите. чтобы текст был непрозрачным, то оставьте Opacity = 1, а поменяйте у цвета фона PanningTitleLayer параметр A, который отвечает за прозрачность (поставьте, анпример, 50%)

    П.С. Можете посмотреть здесь про изменение цвета тайтла. В примере используется LightBlue, замените его кодом RGB вашего полупрозрачного цвета.

    19 июля 2012 г. 3:57
  • Спасибо. Но уже сделал чуть раньше почти так же.

    Сейчас не могу добиться одинаковых цветов у ApplicationBar и Rectangle (имитация цвета фона у заголовка) в темной/светлой темах. Хотя если задать цвет фона у ApplicationBar и Rectangle типа "#FF8B8888", то цвет получается одинаковым. Но я хочу, чтобы оттенок цвета фона менялся в зависимости от темы. Т.е. повторить поведение цвета фона ApplicationBar'а.

    19 июля 2012 г. 8:47
  • Если возникает проблема при смене темы, то скорее всего где-то неправильно задан Background (возможно у  основного Grid'а панорамы) - вместо цвета из ресурсов напрямую указан черный или белый. Поэтому при изменении темы полупрозрачные цвета выглядят по-разному.

    Попробовал задать цвет фона TitleLayer на цвет темы, задал Opacity 0,5 - цвет совпадает с цветом AppBar при любых темах. В случае с Rectangle все должно быть так же, так что попробуйте посмотреть Bacground'ы корневых элементов.

    19 июля 2012 г. 9:28
  • Цвет фона у моей панорамы - рисунок в зависимости от темы:
    <controls:Panorama.Background>
    <ImageBrush ImageSource="{Binding Source={StaticResource AppBackground}, Converter={StaticResource themedImage}}" />
    </controls:Panorama.Background>

    Я не могу понять каким образом у вас цвета совпадают.

    По-умолчанию PanoramaTemplate такой:
    <primitives:PanningTitleLayer
    x:Name="TitleLayer" Grid.Row="0" HorizontalAlignment="Left" Margin="10,-76,0,9"
    Content="{TemplateBinding Title}" ContentTemplate="{TemplateBinding TitleTemplate}"
    FontSize="187" FontFamily="{StaticResource PhoneFontFamilyLight}" CacheMode="BitmapCache" />

    Изменяем его так, как вы пишите:
    <primitives:PanningTitleLayer
    x:Name="TitleLayer" Grid.Row="0" HorizontalAlignment="Left" Margin="10,-76,0,9"
    Background="{StaticResource PhoneBackgroundBrush}"
    Content="{TemplateBinding Title}" ContentTemplate="{TemplateBinding TitleTemplate}"
    Opacity="0.5"
    FontSize="187" FontFamily="{StaticResource PhoneFontFamilyLight}" CacheMode="BitmapCache" />

    При этом - цвет фона заголовка панорамы не меняется, а меняется цвет шрифта.

    19 июля 2012 г. 9:49
  • Получилось! Работает как надо.

    Нашел цвет. Это: PhoneChromeBrush - Used to match the application bar color.

    19 июля 2012 г. 10:22
  • Тема: Green

    <controls:Panorama Title="my application" Style="{StaticResource PanoramaStyle1}">
    <Style x:Key="PanningTitleLayerStyle1" TargetType="controlsPrimitives:PanningTitleLayer">
    	<Setter Property="Template">
    		<Setter.Value>
    			<ControlTemplate TargetType="controlsPrimitives:PanningTitleLayer">
    				<Grid Height="249" Width="2395">
    					<Rectangle Stroke="Black" HorizontalAlignment="Left" Margin="0" Width="480" Opacity="0.5">
    						<Rectangle.Fill>
    							<SolidColorBrush Color="{StaticResource PhoneAccentColor}"/>
    						</Rectangle.Fill>
    					</Rectangle>
    					<StackPanel Orientation="Horizontal" Margin="0" d:LayoutOverrides="Width, Height">
    						<StackPanel.RenderTransform>
    							<TransformGroup>
    								<TranslateTransform x:Name="PanningTransform"/>
    								<TranslateTransform x:Name="LocalTransform"/>
    							</TransformGroup>
    						</StackPanel.RenderTransform>
    						<Rectangle x:Name="LeftWraparound" CacheMode="BitmapCache" Canvas.ZIndex="0"/>
    							<ContentPresenter x:Name="ContentPresenter" CacheMode="BitmapCache" ContentTemplate="{TemplateBinding ContentTemplate}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Canvas.ZIndex="1" Margin="24,0,0,0"/>
    							<Rectangle x:Name="RightWraparound" CacheMode="BitmapCache" Canvas.ZIndex="0"/>
    					</StackPanel>
    				</Grid>
    			</ControlTemplate>
    		</Setter.Value>
    	</Setter>
    </Style>

    19 июля 2012 г. 10:24
  • Хороший вариант. Но я сделал по-другому с Rectangle и Grid, так как мне надо чтобы заголовок панорамы не двигался.

    Еще вопрос: можно ли сделать недвигающимся заголовок панорамы, изменяя именно стили панорамы?

    19 июля 2012 г. 10:39
  • Насколько мне известно - нет. Единственный вариант - вынести заголовок из панорамы в отдельный контрол, а в панораме оставить его пустым.
    19 июля 2012 г. 10:47
  • Я так и сделал: вынес заголовок из панорамы в отдельный контрол, а в панораме оставил его пустым.

    Тогда еще вопрос: можно ли сделать недвигающейся панораму, если у нее всего одна закладка?

    19 июля 2012 г. 11:06
  • Вы динамически создаете элементы панорамы? Может вам больше подходит LockablePivot? 
    19 июля 2012 г. 11:42
  • Элементы созданы в XAML. Pivot я уже применял в своих разработках. Хочу именно панораму сейчас. Недвигающуюся панораму хочу применить для унификации дизайна страниц. Чтобы разметка у них была одинакова, и не было различий в дизайне. Если применить у части страниц панораму, а у части pivot - то возможны визуальные сдвиги в дизайне. Возиться придется, делая одинаковый дизайн у панорамы и pivot'а.
    19 июля 2012 г. 14:31
  • Уважаемый пользователь!

    В вашей теме отсутствует активность в течение последних 5 дней. При отсутствии каких-либо действий в течение 2 последующих дней, тема будет переведена в разряд обсуждений. Вы можете возобновить дискуссию, просто оставив сообщение в данной теме


    Для связи [mail]

    25 июля 2012 г. 6:44