Is there a way to customize the styling of the Callisto Custom Dialog other than the background? I want to change the font size and color of the title property of the Custom Dialog. Any suggestions without messing with the base style?
Reference: https://github.com/timheuer/callisto/wiki/CustomDialog
The CustomDialog's template calculates it's title's Foreground to a colour which contrasts with the Background and sets the FontSize to 26.6667:
<StackPanel Margin="13,19,13,25" HorizontalAlignment="Center" Width="{TemplateBinding Width}" MaxWidth="680">
<local:DynamicTextBlock Foreground="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Background, Converter={StaticResource ColorContrast}}" x:Name="PART_Title" Text="{TemplateBinding Title}" FontFamily="Segoe UI" FontSize="26.6667" FontWeight="Light" Margin="0,0,0,8" />
<ContentPresenter Margin="0" x:Name="PART_Content" Foreground="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Background, Converter={StaticResource ColorContrast}}" />
</StackPanel>
If you want to change these you'll need to retemplate the dialog. You can copy the template from Callisto's generic.xaml and then replace the Foreground and FontSize properties. You may want to use a TemplateBinding so you can set them on the CustomDialog when you call it:
<StackPanel Margin="9,5" HorizontalAlignment="Center" Width="{TemplateBinding Width}" MaxWidth="680">
<callisto:DynamicTextBlock Foreground="{TemplateBinding Foreground}" x:Name="PART_Title" Text="{TemplateBinding Title}" FontFamily="Segoe UI" FontSize="{TemplateBinding FontSize}" FontWeight="Light" Margin="0,0,0,8" />
<ContentPresenter Margin="0" x:Name="PART_Content" Foreground="{TemplateBinding Foreground}" />
</StackPanel>
Then set them to your own resources:
<callisto:CustomDialog Background="{ThemeResource MyCustomDialogBackground}" Foreground="{ThemeResource MyCustomDialogForeground}" Title="Lorem ipsum" Template="{StaticResource CustomDialogControlTemplate1}"></callisto:CustomDialog>
Related
I have a NavigationView and would like to change the header background color:
I have tried:
Looking in generic.xaml for likely styles to override
Using a HeaderTemplate
Here's my code:
<NavigationView Background="Gray">
<NavigationView.Header>
<Border Background="Green">
<TextBlock Text="Header"/>
</Border>
</NavigationView.Header>
<Border Background="Orange">
<TextBlock Text="Sweet content"/>
</Border>
</NavigationView>
Try to override the NavigationViewContentBackground theme resource:
<NavigationView Background="Gray">
<NavigationView.Resources>
<SolidColorBrush x:Key="NavigationViewContentBackground" Color="Red" />
</NavigationView.Resources>
<NavigationView.Header>
<Border Background="Green">
<TextBlock Text="Header"/>
</Border>
</NavigationView.Header>
<Border Background="Orange">
<TextBlock Text="Sweet content"/>
</Border>
</NavigationView>
I'm struggling to vertically center text using TextBlock. I know that it adds extra space above the space in case you use accents but why it isn't consistent with the space below then? There's a few extra pixels.
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Center" Margin="0,40,0,0" Background="#FF191919" BorderThickness="1" BorderBrush="#FFBF0077">
<Grid Width="41" HorizontalAlignment="Left" Padding="0" BorderThickness="0,0,1,0" BorderBrush="#FFBF0077">
<TextBlock x:Name="TextBlockLocalScore" Text="0" FontFamily="Courier New" Foreground="#FF007AFF" TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center" />
</Grid>
<Grid Padding="4,8" BorderThickness="8,0" Width="104">
<TextBlock x:Name="TextBlockMinutesLeft" Text="00" HorizontalAlignment="Left" FontSize="36" VerticalAlignment="Center" FontFamily="Segoe UI Light" FontWeight="Light" TextAlignment="Center" Height="27" TextLineBounds="Tight" Margin="0,0,4,0" />
<TextBlock x:Name="TextBlockSecondsLeft" Text="30" HorizontalAlignment="Right" FontSize="36" VerticalAlignment="Center" FontFamily="Segoe UI Light" FontWeight="Light" OpticalMarginAlignment="TrimSideBearings" TextAlignment="Center" Height="27" TextLineBounds="Tight" />
</Grid>
<Grid Width="41" HorizontalAlignment="Right" Padding="0,8" BorderThickness="1,0,0,0" BorderBrush="#FFBF0077">
<TextBlock x:Name="TextBlockRemoteScore" Text="0" HorizontalAlignment="Center" FontSize="36" VerticalAlignment="Center" FontFamily="Segoe UI Light" FontWeight="Light" OpticalMarginAlignment="TrimSideBearings" TextAlignment="Center" Height="27" TextLineBounds="Tight" Foreground="#FFFF3B30" />
</Grid>
</StackPanel>
I've played with Line Height and Text Line Bounds but I can't why a way to make the text still vertical centered once I change the font.
Updated code to reproduce issue:
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Center" Margin="0,100,0,0" Background="#FF191919" BorderThickness="1" BorderBrush="#FFBF0077">
<Grid Width="51" HorizontalAlignment="Left" Padding="0" BorderThickness="0,0,1,0" BorderBrush="#FFBF0077">
<TextBlock Text="0" FontFamily="Courier New" FontSize="36" Foreground="#FF007AFF" TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center" />
</Grid>
<StackPanel Padding="4" BorderThickness="8,0" Orientation="Horizontal">
<TextBlock Text="01" FontFamily="Courier New" FontSize="36" TextAlignment="Left" VerticalAlignment="Center" Margin="0,0,4,0" />
<TextBlock Text="11" FontFamily="Courier New" FontSize="36" TextAlignment="Right" VerticalAlignment="Center" />
</StackPanel>
<Grid Width="51" HorizontalAlignment="Right" Padding="0,8" BorderThickness="1,0,0,0" BorderBrush="#FFBF0077">
<TextBlock Text="0" FontFamily="Courier New" FontSize="36" Foreground="#FF007AFF" TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center" />
</Grid>
</StackPanel>
You should have a play with these two properties. In your case you are probably more interested in TextLineBounds.
<TextBlock Text="80" FontSize="40" TextLineBounds="Tight" OpticalMarginAlignment="TrimSideBearings" />
Update
I am not sure if your screenshot is 100% accurate. I have used your code to produce the following pictures. Note I have scaled them up by 10 times.
<Grid Width="41" HorizontalAlignment="Left" Padding="0" BorderThickness="0,0,1,0" BorderBrush="#FFBF0077">
<TextBlock x:Name="TextBlockLocalScore" TextLineBounds="Full" Text="80" FontFamily="Courier New" FontSize="36" Foreground="#FF007AFF" TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center" />
<Rectangle UseLayoutRounding="False" HorizontalAlignment="Center" Fill="White" Height="10" VerticalAlignment="Top" Width="1" Margin="-21,0,0,0" />
<Rectangle UseLayoutRounding="False" HorizontalAlignment="Center" Fill="White" Height="10" VerticalAlignment="Bottom" Width="1" Margin="-21,0,0,0" />
</Grid>
With TextLineBounds set to Tight
With TextLineBounds set to Full
Yes, on the first one, there's still a tiny little gap (about 0.3 epx) between the bottom edge of number 8 and the Line, but this is mostly due to layout rounding and effective pixel snapping. I don't think it's noticeable to human eyes. :)
P.S. You cannot purely rely on checking the visuals from Blend Designer as sometimes the artboard doesn't get updated on time to give you the correct result. You should always run your app and check from there.
I have tested your code and reproduced this behavior. If your have not set the height and width of TextBlock, it will set them based on your text font size automatically .
For example, If the FontFamily is Courier New and the font size is 25, and the actual width and height of TextBlock is 16.00244140625 , 29.3203125. It will generate deviation when you center the text vertically. However, you could manual correct it via modifying the Padding just like the follow
I am using Command Bar in windows phone using below code
<Page.BottomAppBar>
<CommandBar Foreground="White">
<CommandBar.PrimaryCommands>
<AppBarButton x:Uid="Share">
<AppBarButton.Icon>
<BitmapIcon UriSource="/Assets/Share.png"/>
</AppBarButton.Icon>
</AppBarButton>
<AppBarButton Icon="Favorite"></AppBarButton>
<AppBarButton Icon="Comment"></AppBarButton>
</CommandBar.PrimaryCommands>
</CommandBar>
</Page.BottomAppBar>
I am getting a footer icon like below with out any background. Simply the icon image is showing.
But i need a footer icon like this with some rounded background for each icon with foreground white
Please guide me to achieve the expected
Try to follow below:
1) Open the page in Blend which you want to modify. Click on the actual Control and Right Click.
2) From the popup window choose Create new template and Define In as Application
3) It creates a copy of Default Template in App.xaml. Now Look For tag ContentPresenter before the end of style. It will be wrapped in StackPanel with Name ContentRoot. Wrap it with a Border.
<Border BorderBrush="{TemplateBinding Foreground}" CornerRadius="50" BorderThickness="2" Margin="10,0">
Finally It should be like below.
<Border BorderBrush="{TemplateBinding Foreground}" CornerRadius="50" BorderThickness="2" Margin="10,0">
<StackPanel x:Name="ContentRoot" MinHeight="{ThemeResource AppBarThemeCompactHeight}">
<ContentPresenter x:Name="Content" AutomationProperties.AccessibilityView="Raw" Content="{TemplateBinding Icon}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="Center" Height="20" Width="20" Margin="0,12,0,4"/>
<TextBlock x:Name="TextLabel" Foreground="{TemplateBinding Foreground}" FontSize="12" FontFamily="{TemplateBinding FontFamily}" Margin="0,0,0,6" TextAlignment="Center" TextWrapping="Wrap" Text="{TemplateBinding Label}"/>
</StackPanel>
</Border>
Now go back to your page and set the style to this style key. Like Below.
<AppBarButton Icon="Favorite" Style="{StaticResource AppBarButtonStyle1}" ></AppBarButton>
This is Beauty of Blend. Not just this control, you can modify any control that has Style Template.
Good Luck.
I have a LongListSelector control on a page in my Windows Phone 8 app. For this control I set a GroupHeaderTemplate and a ItemTemplate and both contain a TextBlock. If I align the TextBlock controls to center I have some weird behavior (maybe not weird but unexplainable to me at the moment). When I open the page on my phone the centered text moves ca. 5px to the right. The move is visible to the user (it's happening after the page is loaded). I tried to solve this problem but all margin changes (and other trials) did not change the behavior and my friend Google couldn't help me either. Can some explain to my why this is happening and how to solve this?
My code (simplified):
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="0">
<phone:LongListSelector x:Name="longList" LayoutMode="List" HideEmptyGroups ="true" Margin="5,0,5,5" ItemsSource="{Binding List, Mode=OneWay}" IsGroupingEnabled="True" Background="Transparent" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<phone:LongListSelector.Resources>
<DataTemplate x:Key="itemTemplate">
<Grid Margin="10,10,10,0" Background="#FFF3F1F1" HorizontalAlignment="Left">
<TextBlock x:Name="name" Margin="10" TextWrapping="NoWrap" Text="{Binding Name}" VerticalAlignment="Center" FontSize="40"/>
</Grid>
</DataTemplate>
<DataTemplate x:Key="groupHeaderTemplate">
<Grid Margin="10,10,10,0" Background="#FFF3F1F1" HorizontalAlignment="Center">
<TextBlock x:Name="name" Margin="10" TextWrapping="NoWrap" Text="test" VerticalAlignment="Center" FontSize="40"/>
</Grid>
</DataTemplate>
</phone:LongListSelector.Resources>
<!--<phone:LongListSelector.JumpListStyle>
<StaticResource ResourceKey="jumpListStyle"/>
</phone:LongListSelector.JumpListStyle>-->
<phone:LongListSelector.GroupHeaderTemplate>
<StaticResource ResourceKey="groupHeaderTemplate"/>
</phone:LongListSelector.GroupHeaderTemplate>
<phone:LongListSelector.ItemTemplate>
<StaticResource ResourceKey="itemTemplate"/>
</phone:LongListSelector.ItemTemplate>
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged">
<i:InvokeCommandAction Command="{Binding SelectItemCommand}"
CommandParameter="{Binding SelectedItem, ElementName=longList}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</phone:LongListSelector>
</Grid>
Thanks in advance
Default, they look like this: http://wp.qmatteoq.com/wp-content/uploads/2013/01/map.png. I would like to have them look like on Nokia Maps, like this: http://www.themobileindian.com/images/nnews/2012/11/9225/Nokia-Maps.jpg, so they take less space. And everytime I tap on them, they will toggle between icon and description.
Lets say I have two templates for pushpin in resources:
<ControlTemplate x:Key="1" TargetType="maptk:Pushpin">
<Grid x:Name="ContentGrid" Background="Transparent" Margin="-4,0,0,0">
<StackPanel >
<Grid Background="Black">
<StackPanel Margin="5,5,0,0">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Tap">
<cmd:EventToCommand PassEventArgsToCommand="False"
CommandParameter="{Binding}"
Command="{Binding ElementName=NearbyMap, Path=DataContext.Pushpin_OnTapCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<TextBlock Text="{Binding Location}" Foreground="White" />
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding LocationName}" Foreground="White" />
<TextBlock Text="-" Foreground="White" Padding="3,0"/>
<TextBlock Text="{Binding LocationName}" Foreground="White" />
</StackPanel>
<TextBlock Text="{Binding LocationName}" Foreground="White" />
<TextBlock Text="{Binding LocationName}" Foreground="White" />
</StackPanel>
</Grid>
<Polygon Fill="Black" Points="0,0 29,0 0,29" Width="29" Height="29" HorizontalAlignment="Left" />
<Grid Height="26" Width="26" Margin="-13,-13,0,0" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left">
<Grid.RenderTransform>
<CompositeTransform Rotation="-45"/>
</Grid.RenderTransform>
<Rectangle Fill="Black" HorizontalAlignment="Center" Margin="0" Stroke="White" VerticalAlignment="Center" Height="26" Width="26" />
<Ellipse HorizontalAlignment="Center" Height="16" Margin="0" VerticalAlignment="Center" Fill="Green" Width="16" />
</Grid>
</StackPanel>
</Grid>
</ControlTemplate>
<ControlTemplate TargetType="maptk:Pushpin" x:Key="2">
<Grid Height="26" Width="26" Margin="-13,-13,0,0" RenderTransformOrigin="0.5,0.5" >
<Grid.RenderTransform>
<CompositeTransform Rotation="-45"/>
</Grid.RenderTransform>
<Rectangle Fill="Black" HorizontalAlignment="Center" Margin="0" Stroke="White" VerticalAlignment="Center" Height="26" Width="26"/>
<Ellipse HorizontalAlignment="Center" Height="16" Margin="0" VerticalAlignment="Center" Fill="Red" Width="16"/>
</Grid>
</ControlTemplate>
and the pushpin control:
<maptk:Pushpin x:Name="PushPins" GeoCoordinate="{Binding Location}" Visibility="Visible" Content="{Binding LocationName}" Template="{StaticResource 2}"/>
How can I switch between them with some triggers or something?
#Rares found another solution, that works great in my case...
So the general issue here is just, how to switch/change the design when tapping the pushpin.
Well it seems that when you add the pushpins to the map they get their design from the toolkit, but you still are able to change that by setting the Style propery in code!
So if you hook up each pushpin to a pushpin tap event you can just do the following in your code behind of the XAML page:
private void Pushpin_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
((Pushpin)sender).Style = Application.Current.Resources["PushpinStyle"] as Style;
}
Provided you created a PushpinStyle inside a resourcedictionary that has a Pushpin as TargetType.
To be able to reset the design when pushing on another pushpin, I just keep a reference to the pushpin pressed and reset it's style before changing the style of the newly pressed one!
Works great for me...
You can use a general trick to modify the look of TK components. This can be used for nearly all TK components.
All TK components have styles (defined in XAML), these are not settable via code. But you can override the style in your applicatoin (keep in mind, you override the style in general, so if you modify e.g. pushpin styles, all pushpins inside your app will look like that)
A bit more in detail:
a) Get the TK source from https://phone.codeplex.com/sourcecontrol/latest
b) Have a look into Themes/Generic.xaml
c) Next to the last element, you see the style definition for the pushpin.
Starts with:
<!-- Default Style used for Pushpin -->
<Style TargetType="maptk:Pushpin">
...
d) Copy this style (or you can write it from scratch of course) and modify the style to whatever you like
e) Add this modified code snippet to your Application.Resources (e..g. the Application.Resources section in your App.xaml)
Keep in mind, you also need to reference the right TK namespace.
For pushpin, you need to include:
xmlns:maptk="clr-namespace:Microsoft.Phone.Maps.Toolkit"
Now your app uses the locally overriden style for your pushpin.
Btw: Since TK is Ms-PL licensed, keep in mind that there are probably license restrictions if you take the original source code from MSFT.
I personally found it easier to not use the toolkit for pushpins. Instead I wrote a user control "PushPinUC" that I designed how I wanted it. The UserControl subscribes to the Tap event - so I can expand/retract when it's pressed.
You can add user controls to your Map control using the following code.
private void BindPushpins(IEnumerable<PushpinIVM> pushpins)
{
foreach (var pushpin in pushpins)
{
var pushPinUC = new PushpinUC { Pushpin = pushpin };
var mapOverlay = new MapOverlay { GeoCoordinate = pushpin.Location, Content = pushPinUC };
var mapLayer = new MapLayer { mapOverlay };
Map.Layers.Add(mapLayer);
}
}
I found a solution: add only one control template to the pushpins. The stackpanel is the pushpin with the textbox and the grid before the stackpanel is the pushpin without the textbox. The stackpanel is with visibility collapsed. As you can see there are 2 triggers for the tap event, where i just set the visibility of the pushpin with the textbox to visible or collapsed. You can use any image for the pushpins.
<ctrls:BaseUserControl.Resources>
<ControlTemplate x:Key="PushPinTemplate" TargetType="maptk:Pushpin">
<Grid x:Name="ContentGrid" Background="Transparent" Margin="-4,0,0,0">
<Grid Height="40" Width="30" Margin="-13,-13,0,0" RenderTransformOrigin="0.5,0.5" >
<Image Source="/Assets/Images/push1.png" Width="40" Height="40">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Tap">
<cmd:EventToCommand PassEventArgsToCommand="True"
Command="{Binding ElementName=NearbyMap, Path=DataContext.Rectangle_OnTapCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Image>
</Grid>
<StackPanel x:Name="DetailsPanel" Visibility="{Binding Path=Visibility}">
<Grid x:Name="TestGrid" Background="Black">
<StackPanel Margin="5,5,0,0">
<!--TextBlock tap-->
<i:Interaction.Triggers>
<i:EventTrigger EventName="Tap">
<cmd:EventToCommand PassEventArgsToCommand="True"
Command="{Binding ElementName=NearbyMap, Path=DataContext.Pushpin_OnTapCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<TextBlock Text="{Binding LocationName}" Foreground="White" FontSize="25"/>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding StreetName}" Foreground="White" />
<TextBlock Text="{Binding StreetNumber}" Foreground="White" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding DistanceToDisplay}" Foreground="White" />
</StackPanel>
</StackPanel>
</Grid>
<Polygon Fill="Black" Points="0,0 29,0 0,29" Width="29" Height="29" HorizontalAlignment="Left" Visibility="Visible"/>
<Grid Height="40" Width="30" Margin="-13,-13,0,0" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left">
<Image Source="/Assets/Images/push2.png" Width="40" Height="40">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Tap">
<cmd:EventToCommand PassEventArgsToCommand="True"
Command="{Binding ElementName=NearbyMap, Path=DataContext.Rectangle_OnTapCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Image>
</Grid>
</StackPanel>
</Grid>
</ControlTemplate>
</ctrls:BaseUserControl.Resources>
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<maps:Map x:Name="NearbyMap"
Center="{Binding MapCenter, Mode=TwoWay}"
ZoomLevel="15"
dp:MapPushPinDependency.ItemsSource="{Binding Path=Locations, Mode=OneWay}"
>
<i:Interaction.Triggers>
<i:EventTrigger EventName="Tap">
<cmd:EventToCommand PassEventArgsToCommand="True"
Command="{Binding ElementName=NearbyMap, Path=DataContext.Map_OnTapCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<maptk:MapExtensions.Children>
<maptk:MapItemsControl Name="StoresMapItemsControl">
<maptk:MapItemsControl.ItemTemplate>
<DataTemplate>
<maptk:Pushpin x:Name="PushPins" GeoCoordinate="{Binding Location}" Visibility="Visible" Content="{Binding LocationName}" Template="{StaticResource PushPinTemplate}"/>
</DataTemplate>
</maptk:MapItemsControl.ItemTemplate>
</maptk:MapItemsControl>
<maptk:UserLocationMarker x:Name="UserLocationMarker" Visibility="Visible" GeoCoordinate="{Binding MyLocation}"/>
</maptk:MapExtensions.Children>
</maps:Map>
</Grid>
#Depechie
private void RectangleTapAction(GestureEventArgs e)
{
var pushpinControl = TryFindParent<Pushpin>(e.OriginalSource as UIElement);
var pushpin = (pushpinControl as FrameworkElement).DataContext as PushPinModel;
Locations.Where(t => t.Id != pushpin.Id).ToList().ForEach(t => t.Visibility = Visibility.Collapsed);
pushpin.Visibility = pushpin.Visibility == Visibility.Visible ? Visibility.Collapsed : Visibility.Visible;
e.Handled = true;
}
Locations is an ObservableCollection and there is a Linq where I hide the textbox for other pushpins. PushPinModel has an attribute representing the visibility.