I noticed a Windows Store app called PressPlay Video:
http://apptivate.ms/apps/76/pressplay-video
It is able to display text with a shadow all around the text (for subtitles and overlay).
Since drop shadow effects aren't available in WinRT, I was wondering how to do it.
They simply stacking TextBlocks and adjusting their margins and colors to simulate shadow effect. Something like:
<Grid VerticalAlignment="Center" HorizontalAlignment="Center">
<TextBlock FontSize="50" Text="My Marvelous Shadow" />
<TextBlock FontSize="50" Text="My Marvelous Shadow" Margin="6 6 0 0" Opacity="0.1" />
<TextBlock FontSize="50" Text="My Marvelous Shadow" Margin="5 5 0 0" Opacity="0.1" />
<TextBlock FontSize="50" Text="My Marvelous Shadow" Margin="4 4 0 0" Opacity="0.1" />
<TextBlock FontSize="50" Text="My Marvelous Shadow" Margin="3 3 0 0" Opacity="0.1" />
</Grid>
It's not all-around, but you should get the idea.
P.S. It's sometimes helpful to dive into Program Files\WindowsApps and look inside some apps.
Related
I am New WPF. I have PopupControl below is XAML for that:-
<Popup Name="PopupRemark" AllowsTransparency="True" Placement="Left" HorizontalOffset="45" VerticalOffset="-22"
PlacementTarget="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ToggleButton}}"
IsOpen="{Binding IsChecked, ElementName=btnInfo}" StaysOpen="False" >
<Canvas Width="230" Height="200" Background="Transparent" >
<Path x:Name="Container" Canvas.Left="0" Canvas.Top="0" Fill="#f2f6f7" Stroke="#A9A9A9"
Data="M 230,40 L220,50 220,90 0,90 0,0 220,0 220,30 230,40">
<Path.Effect>
<DropShadowEffect BlurRadius="18" Color="Black" Opacity="0.4"/>
</Path.Effect>
</Path>
<Label Grid.Row="0" FontSize="13" FontWeight="Bold" FontFamily="Roboto" Content="Remark" HorizontalAlignment="Left" Margin="0" VerticalAlignment="Center"/>
<TextBlock Canvas.Left="5" Canvas.Top="25" Width="210" Text="{Binding Remark}" Foreground="#2c3e50" FontFamily="Roboto" FontSize="11" TextWrapping="Wrapwithoverflow" />
</Canvas>
</Popup>
Issue is, I want to set auto height & width for canvas or popup control so my popup will size as per content into it.I googled and knew that canvas should have fix height or width but is there any solution(Workaround) to make popup auto sizable.or how can add scroller into popup. It will be greatly appreciable
Thanks in advance
Consider the following XAML:
<Grid>
<TextBlock Text="Some Text" TextAlignment="Right" />
<TextBlock Text="Some Text" HorizontalAlignment="Right" />
</Grid>
So long as both TextBlocks are set to the same Grid.Row and Grid.Column, they will always appear in the same place - one on top of the other.
Similar concept, here - with the 2 lines of text in both the StackPanels aligning exactly:
<Grid>
<StackPanel>
<TextBlock Text="Line One" HorizontalAlignment="Right" />
<TextBlock Text="Line Two" TextAlignment="Right" />
</StackPanel>
<StackPanel>
<TextBlock Text="Line One" HorizontalAlignment="Right" />
<TextBlock Text="Line Two" TextAlignment="Right" />
</StackPanel>
</Grid>
And so on...
In terms of displaying the text to the right of the parent, the TextAlignment and HorizontalAlignment attributes are both doing the same thing - from what I can see.
Can anybody tell me what the actual difference between TextAlignment and HorizontalAlignment is, when it comes to TextBlocks?
Is there a preferred choice of the two to use?
Are there any implications to using either?
HorizontalAlignment determines the alignment of the TextBox relative to its parent.
TextAlignment determines the alignment of the text within the TextBox
I have a ListView in my UWP application with this code.
<ListView Name="menuListView" HorizontalAlignment="Center"
Grid.Row="1" SelectionChanged="ListView_SelectionChanged"
BorderThickness="0,0,0,5" SelectedIndex="0"
Grid.ColumnSpan="2">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"></StackPanel>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<TextBlock Name="dayTB" Text="Day" Margin="25 0 0 0" FontSize="18" />
<TextBlock Name="weekTB" Text="Week" Margin="25 0 0 0" FontSize="18" />
<TextBlock Name="monthTB" Text="Month" Margin="25 0 0 0" FontSize="18" />
</ListView>
It looks like this.
I am trying to make it look like this for quite some time now, but my tries are not successful.
Is there a way to achieve this?
Any help would be appreciated.
The right control used in the picture, is the Pivot, not ListView.
try this basic Pivot XAML code, and play around it
<Pivot Title="EMAIL">
<PivotItem Header="All">
<TextBlock Text="all emails go here." />
</PivotItem>
<PivotItem Header="Unread">
<TextBlock Text="unread emails go here." />
</PivotItem>
<PivotItem Header="Flagged">
<TextBlock Text="flagged emails go here." />
</PivotItem>
<PivotItem Header="Urgent">
<TextBlock Text="urgent emails go here." />
</PivotItem>
</Pivot>
I have a ListView and I want to put a border around each item in the ListView. Microsoft doesn't seem to have a system theme for the Border element.
What is the recommended way to theme the border so it looks good on Dark and Light theme?
Here is my ListView
<ListView ItemsSource="{Binding Products}" Header="My Header" Margin="10,5,10,5">
<ListView.HeaderTemplate>
<DataTemplate>
<TextBlock Text="My Header" Style="{ThemeResource HeaderTextBlockStyle}" />
</DataTemplate>
</ListView.HeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<Border>
<StackPanel>
<TextBlock Text="{Binding Name}"
Style="{StaticResource TitleTextBlockStyle}" />
<TextBlock Text="TextBlock 1:"
Style="{StaticResource ControlHeaderTextBlockStyle}" />
<TextBox Text="{Binding TextBlock1}"/>
<TextBlock Text=" TextBlock 2:"
Style="{ThemeResource ControlHeaderTextBlockStyle}"/>
<TextBox Text="{Binding TextBlock2}"/>
</StackPanel>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
**************Edit 1****************
I should have put this. I want it in a Universal App targeted at WP8.1 and Windows 8.1, not just phone.
You probably just want the standard foreground color, right? (dark for light, light for dark). That would be the PhoneContrastForegroundBrush.
<Border BorderThickness="1" BorderBrush="{StaticResource PhoneContrastForegroundBrush}">
The previous answers lead me to look at system brushes and I found ApplicationForegroundThemeBrush, which I believe will work.
I started off with a Grouped Items Page template and have my data displaying in groups. I added some margins around these items to improve spacing, but now when I hover over these items, the margin area shows as highlighted. I'm sure this is an easy one for xaml gurus. Please assist!!
Here's my markup:
<GridView.ItemTemplate>
<DataTemplate>
<!-- ******************* here is my margins ******************* -->
<Border BorderBrush="LightGray" BorderThickness="2" Margin="0,0,20,20">
<Grid HorizontalAlignment="Left" Width="390" Height="190">
<Grid.Background>
<ImageBrush ImageSource="/Assets/default.png" Stretch="None"/>
</Grid.Background>
<StackPanel Orientation="Horizontal" VerticalAlignment="Top">
<Image VerticalAlignment="Top" Stretch="None" Source="{Binding ImageUrl}" Margin="10,10,0,0"/>
<StackPanel MaxWidth="270">
<TextBlock Text="{Binding Summary}"/>
<TextBlock Text="{Binding Brand}" />
<TextBlock Text="{Binding Detail}" TextWrapping="Wrap" />
</StackPanel>
</StackPanel>
</Grid>
</Border>
</DataTemplate>
</GridView.ItemTemplate>
Your ItemTemplate just populates over the existing style template for the GridViewItem Style which if you look in the default template shown in that link you'll see a Rectangle named "PointerOverBorder" which is shown (via the VisualStateManager) in the PointerOver state with its Fill set to ListViewItemPointerOverBackgroundThemeBrush.
You could go into the template (right-click, edit template) and remove it, or add your margins, or make it transparent or a number of options. Or could just overwrite the brush resource on the instance to be transparent or something kind of like;
<blah.Resources>
<SolidColorBrush x:Key="ListViewItemPointerOverBackgroundThemeBrush" Color="Transparent" />
</blah.Resources>
Hope this helps.