i want to have a centred popup notifications on my window ( Height="400" Width="500"). See the xaml code below. Is it possible to center it only with xaml (without the code behind)?
</Grid>
<TextBlock Text="TEXT" Grid.Row="1" Grid.Column="0" Grid.RowSpan="2" Grid.ColumnSpan="3" FontSize="200" FontWeight="Bold" HorizontalAlignment="Center"/>
<Grid Grid.Row="1" Grid.Column="1">
<Popup x:Name="PopupName" Grid.ColumnSpan="2" IsOpen="{Binding ElementName=ToggleButton,Path=IsChecked}" StaysOpen="False" Placement="Absolute"
AllowsTransparency="True" PopupAnimation="None" Focusable="False" HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid Height="400" Width="500">
<Rectangle Fill="Silver" Opacity="0.5" Panel.ZIndex="1" Height="400" Width="500"/>
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" Panel.ZIndex="2" Height="150" Width="150">
<ListBox Height="Auto" HorizontalAlignment="Center" >
<Label Content="Red" Background="Red" Margin="5" VerticalAlignment="Top"/>
<Label Content="Green" Background="Green" Margin="5" VerticalAlignment="Center"/>
<Label Content="Yellow" Background="Yellow" Margin="5" VerticalAlignment="Bottom"/>
</ListBox>
</StackPanel>
<ToggleButton Panel.ZIndex="2" Background="Coral" Foreground="White" FontWeight="Bold" Name ="Button" Width="80" Height="30" HorizontalAlignment="Center" Margin="5,170,5,5" Content="Close" Click="Button_OnClick"/>
</Grid>
</Popup>
</Grid>
Another option was to use Placement ="AbsolutePoint" with Horizon-/Verticaloffset but it seems like a bit weird :D
Any suggestion? Thx ;)
This should center the Popup in the parent window:
<Popup ...
Placement="Center"
PlacementTarget="{Binding RelativeSource={RelativeSource AncestorType=Window}}" />
How can I create a multicolumn ListView/ListBox in WPF with good performance. I know how to do it with WrapPanel. In the ListBox I have about 70-150 items and scrolling is laggy/not so fluent (like with VirtualStackPanel). Do you know how to solve this problem?
Thank you
Here is ListBox XAML
<ListBox x:Name="ListBoxSubtitles" VirtualizingStackPanel.IsVirtualizing="True" Margin="0,0,0,0" ItemsSource="{Binding Subtitle,Mode=TwoWay}" Grid.Row="1" ScrollViewer.HorizontalScrollBarVisibility="Disabled" BorderBrush="{x:Null}" Background="#FFEEECEC"
>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Width="520" Height="150" Background="#FF424242" Margin="5,5,5,0">
<Grid.RowDefinitions>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="85"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="{Binding PosterImgUri,Mode=TwoWay}" Grid.ColumnSpan="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Stretch="UniformToFill">
<Image.Effect>
<BlurEffect Radius="40" />
</Image.Effect>
</Image>
<Image Width="75" Height="110" Grid.Column="0" Margin="2,2,2,2" VerticalAlignment="Top" HorizontalAlignment="Stretch" Source="{Binding PosterImgUri,Mode=TwoWay}" Stretch="Fill"/>
<Label Grid.Column="0" Content="86%" HorizontalAlignment="Center" Margin="0,0,0,0" VerticalAlignment="Bottom" Background="{x:Null}" Foreground="White" FontFamily="Segoe UI Semibold" FontSize="18" FontWeight="Bold"/>
<StackPanel Grid.Column="1">
<Label HorizontalAlignment="Left" Margin="0,0,0,0" VerticalAlignment="Top" Background="{x:Null}" Foreground="White" FontFamily="Segoe UI Semibold" FontSize="25" FontWeight="Bold">
<TextBlock TextWrapping="Wrap" Text="{Binding SubtitleName,Mode=TwoWay}">
</TextBlock>
</Label>
<Grid>
<Label Content="Stažení:" HorizontalAlignment="Left" Margin="0,-7,0,0" VerticalAlignment="Top" Background="{x:Null}" Foreground="White" FontFamily="Segoe UI Light" FontSize="18"/>
<Label Content="{Binding subtitleName,Mode=TwoWay}" HorizontalAlignment="Left" Margin="65,-7,0,0" VerticalAlignment="Top" Background="{x:Null}" Foreground="White" FontFamily="Segoe UI Light" FontSize="18"/>
</Grid>
<Grid Width="100" Height="20" Margin="0,0,0,0" HorizontalAlignment="Left">
<ProgressBar Value="50" HorizontalAlignment="Stretch" VerticalContentAlignment="Stretch" Margin="7,0,0,0" Foreground="#FF84E60F" Background="White"/>
<Label Margin="0,-2,0,0" HorizontalAlignment="Center" VerticalAlignment="Center" Content="50" FontSize="10" FontWeight="Bold"></Label>
</Grid>
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
also I would like to ask, how to remove this blue selection when mouse is focusing item.
You need a virtualizing wrap panel. Unfortunately, writing such kind of panel is not easy and most good implementations are either not free or not working for arbitrary complex data templates.
You can make the image bindings async, using the IsAsync property.
Another approach is to reduce the visual tree, which is not an option, because you go after quality. You can move the layout from the DataTemplate into a dedicated UserControl and load the images only when the control is visible (VisibilityChanged event or rectangle intersect based).
I'm trying to convert a WP8 projet to Universal Apps. I'experiecing a strange error regarding LocalizedStrings.
I use Multilingual App Toolkit to manage translations. I've updated to the latest version (4.0) which says it supports Universal apps.
The thing is it gives me this error in App.xaml: The name "LocalizedStrings" does not exist in the namespace "using:StayfilmUniversalApp".
And it is complaining on the MainPage.xaml too but not in other pages...
In MainPage.xaml it says that The type LocalizedStrings was not found. underlined in color blue the whole DataTemplate block that has a component which uses LocalizedStrings, for eg.:
<DataTemplate x:Key="TIT_WhatsNew">
<Grid Width="250" Height="52" Margin="0" HorizontalAlignment="Left">
<Rectangle Fill="White" HorizontalAlignment="Left" Height="3" Margin="0" VerticalAlignment="Top" Width="250" />
<TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" Text="{Binding LocalizedResources.WHATSNEW, Mode=OneWay, Source={StaticResource LocalizedStrings}}" VerticalAlignment="Center" FontSize="21.333" FontStretch="ExtraCondensed" FontFamily="/Assets/Fonts/Frontage-regular.otf#Frontage Regular" />
<Rectangle Fill="White" HorizontalAlignment="Left" Height="3" Margin="0" VerticalAlignment="Bottom" Width="250" />
</Grid>
</DataTemplate>
here is my App.xaml:
<Application
x:Class="StayfilmUniversalApp.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:StayfilmUniversalApp"
RequestedTheme="Light">
<Application.Resources>
<ResourceDictionary>
<!--<local:LocalizedStrings x:Key="LocalizedStrings"/>-->
<local:LocalizedStrings xmlns:local="using:StayfilmUniversalApp" x:Key="LocalizedStrings" />
<Color x:Key="PhoneDisabledColor">#66FFFFFF</Color>
<SolidColorBrush x:Key="PhoneDisabledBrush" Color="{StaticResource PhoneDisabledColor}" />
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Styles\PhoneStyles.xaml" />
</ResourceDictionary.MergedDictionaries>
<!-- Other resources if you have -->
</ResourceDictionary>
</Application.Resources>
and My LocalizedStrings.cs:
using StayfilmUniversalApp.Resources;
namespace StayfilmUniversalApp
{
/// <summary>
/// Provides access to string resources.
/// </summary>
public class LocalizedStrings
{
private static AppResources _localizedResources = new AppResources();
public AppResources LocalizedResources { get { return _localizedResources; } }
}
}
The problem has nothing to do with LocalizedStrings.
I gave up trying to fix the page and decided to recreate it from scratch. Doing so, I found out there may be a VS bug behind and is showing different error. because when I added a DataTemplate (this one below) to a HubSection it gave me this error on the entire DataTemplate block:
Cannot add instance of type 'Windows.UI.Xaml.Setter' to a collection of type 'Windows.UI.Xaml.SetterBaseCollection'.
<DataTemplate x:Key="YOTWDataTemplate">
<ScrollViewer HorizontalAlignment="Left" VerticalAlignment="Top" BorderThickness="0" Height="548">
<StackPanel x:Name="stackYOTW" Margin="0,0,0,100" HorizontalAlignment="Center" VerticalAlignment="Top" Width="420">
<TextBlock TextWrapping="Wrap" Foreground="White" FontFamily="Portable User Interface" Margin="12,0,0,0">
<Run Text="{Binding LocalizedResources.EveryWeek, Mode=OneWay, Source={StaticResource LocalizedStrings}}"/>
<Run FontWeight="Bold" Text="YES!"/>
<LineBreak/>
<Run Text="{Binding LocalizedResources.ChoosenByStayfilm, Mode=OneWay, Source={StaticResource LocalizedStrings}}"/>
<LineBreak/>
<Run Text="{Binding LocalizedResources.ForYouToWatch, Mode=OneWay, Source={StaticResource LocalizedStrings}}"/>
</TextBlock>
<ListBox x:Name="listYOTW" ItemsSource="{Binding listYesMovie}" Foreground="White" Background="{x:Null}" BorderBrush="{x:Null}" ScrollViewer.VerticalScrollBarVisibility="Disabled">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="12,20,0,0" Background="White" Width="420">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="64"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="64*"/>
<RowDefinition Height="119*"/>
<RowDefinition Height="50*"/>
</Grid.RowDefinitions>
<Image Margin="12" Source="{Binding user.photo}" VerticalAlignment="Center" Width="40" Height="40" HorizontalAlignment="Center" Stretch="Fill"/>
<TextBlock x:Name="NAME" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Center" FontFamily="Segoe WP Semibold" Margin="0" Grid.Column="1" Foreground="#FFAF252B" Text="{Binding user.fullName}" FontSize="18.667"/>
<TextBlock x:Name="TIME" HorizontalAlignment="Right" TextWrapping="Wrap" VerticalAlignment="Center" FontFamily="Segoe WP Light" Margin="0,0,14,0" Grid.Column="1" Foreground="#FF787878" Text="{Binding prettyPublicated}" FontSize="17.333" TextAlignment="Right"/>
<Image Grid.ColumnSpan="2" Margin="0,0,0,59" Grid.RowSpan="2" Source="{Binding thumbnailUrl}" Stretch="UniformToFill" Grid.Row="1"/>
<Grid x:Name="TituloFILM" Grid.ColumnSpan="2" Height="50" VerticalAlignment="Top" Grid.Row="1" Background="#CCAF252B">
<TextBlock x:Name="TITLE" HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding title}" VerticalAlignment="Center" Foreground="White" FontFamily="Segoe WP Light" FontSize="24" Margin="14,0,0,0"/>
</Grid>
<Grid x:Name="GridYES" Grid.ColumnSpan="2" HorizontalAlignment="Left" Grid.RowSpan="2" VerticalAlignment="Bottom" Width="80" Grid.Row="2" Height="30" Margin="14">
<Canvas x:Name="iconYES" HorizontalAlignment="Right" Height="20" UseLayoutRounding="False" VerticalAlignment="Center" Width="46" Margin="0">
<Canvas x:Name="Layer_1" Height="15.391" Canvas.Left="0.409" Canvas.Top="2.304" Width="45.182">
<Path Data="F1M10.991,0L7.327,5.987 3.619,0 0,0 5.741,8.801 5.741,14.9 8.913,14.9 8.913,8.801 14.61,0z" Fill="#FF9AA7B2" Height="14.9" Canvas.Left="0" Canvas.Top="0.223" Width="14.61"/>
<Path Data="F1M0,14.901L0,0 10.544,0 10.544,2.793 3.172,2.793 3.172,5.943 10.388,5.943 10.388,8.734 3.172,8.734 3.172,12.109 10.544,12.109 10.544,14.901z" Fill="#FF9AA7B2" Height="14.901" Canvas.Left="15.552" Canvas.Top="0.223" Width="10.544"/>
<Path Data="F1M0,13.024L1.72,10.611C2.77,11.706 4.4,12.622 6.457,12.622 8.199,12.622 9.046,11.817 9.046,10.968 9.046,8.332 0.469,10.142 0.469,4.534 0.469,2.055 2.613,0 6.121,0 8.489,0 10.455,0.715 11.929,2.077L10.164,4.4C8.958,3.283 7.349,2.77 5.83,2.77 4.468,2.77 3.708,3.373 3.708,4.267 3.708,6.635 12.263,5.048 12.263,10.611 12.263,13.336 10.32,15.391 6.299,15.391 3.44,15.391 1.384,14.431 0,13.024" Fill="#FF9AA7B2" Height="15.391" Canvas.Left="27.575" Canvas.Top="0" Width="12.263"/>
<Path Data="F1M0.537,10.053L0.067,0 3.485,0 3.039,10.053z M0,13.337C0,12.354 0.805,11.528 1.787,11.528 2.77,11.528 3.598,12.354 3.598,13.337 3.598,14.297 2.77,15.124 1.787,15.124 0.805,15.124 0,14.297 0,13.337" Fill="#FF9AA7B2" Height="15.124" Canvas.Left="41.584" Canvas.Top="0.223" Width="3.598"/>
</Canvas>
</Canvas>
<TextBlock x:Name="N_YES" HorizontalAlignment="Right" TextWrapping="Wrap" VerticalAlignment="Center" FontFamily="Segoe WP Light" Margin="0,0,59,3" Foreground="#FF35424D" Text="{Binding likeCount}" FontSize="20" TextAlignment="Right"/>
</Grid>
<Grid x:Name="GridCOMENT" Grid.ColumnSpan="2" HorizontalAlignment="Center" VerticalAlignment="Bottom" Width="70" Grid.Row="2" Height="30" Margin="14">
<Canvas x:Name="iconCOMENT" HorizontalAlignment="Right" Height="26" UseLayoutRounding="False" VerticalAlignment="Center" Width="28" Margin="0,2,0,0">
<Canvas x:Name="Layer_4" Height="22.194" Canvas.Left="2.697" Canvas.Top="1.903" Width="22.605">
<Path Data="M23.106,0.5L0.5,0.5 0.5,16.001 6.216,16.001 3.852,22.694 13.176,16.001 23.106,16.001z" Height="24.028" Canvas.Left="-0.5" Stroke="#FF9BA8B3" Canvas.Top="-0.5" Width="23.605"/>
</Canvas>
</Canvas>
<TextBlock x:Name="N_YES1" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Center" FontFamily="Segoe WP Light" Margin="0,-3,0,0" Foreground="#FF35424D" Text="{Binding commentCount}" FontSize="20" TextAlignment="Right"/>
</Grid>
<Grid x:Name="GridVIEW" Grid.ColumnSpan="2" HorizontalAlignment="Right" VerticalAlignment="Bottom" Width="70" Grid.Row="2" Height="30" Margin="14">
<Canvas x:Name="iconVIEW" HorizontalAlignment="Right" Height="26" UseLayoutRounding="False" VerticalAlignment="Center" Width="36">
<Canvas x:Name="Layer_2" Height="18" Canvas.Left="2.113" Canvas.Top="4" Width="31.145">
<Path Data="M31.723,9.5C28.609,4.125 22.809,0.5 16.151,0.5 9.492,0.5 3.692,4.125 0.578,9.5 3.692,14.875 9.492,18.5 16.151,18.5 22.809,18.5 28.609,14.875 31.723,9.5z" Height="19" Canvas.Left="-0.578" Stroke="#FF9BA8B3" Canvas.Top="-0.5" Width="32.301"/>
<Path Data="F1M9.409,4.705C9.409,7.303 7.303,9.41 4.704,9.41 2.106,9.41 0,7.303 0,4.705 0,2.107 2.106,0 4.704,0 7.303,0 9.409,2.107 9.409,4.705" Fill="#FF9BA8B3" Height="9.41" Canvas.Left="10.868" Canvas.Top="4.295" Width="9.409"/>
</Canvas>
</Canvas>
<TextBlock x:Name="N_YES2" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Center" FontFamily="Segoe WP Light" Margin="0,-3,0,0" Foreground="#FF35424D" Text="{Binding viewCount}" FontSize="20" TextAlignment="Right"/>
</Grid>
<Button Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}" Margin="0,50,0,0" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.ColumnSpan="2" Grid.Row="1" Click="Button_Click" Style="{StaticResource ButtonStyle}">
<Canvas x:Name="PLAY" HorizontalAlignment="Center" Height="102" UseLayoutRounding="False" VerticalAlignment="Center" Width="102">
<Canvas x:Name="Layer_3" Height="96" Canvas.Left="2" Canvas.Top="2" Width="96" Margin="0" Background="{StaticResource TransparentBrush}">
<Path Data="F1M0,0L29.333,16.936 0,33.871z" Fill="White" Height="33.871" Canvas.Left="38.26" Canvas.Top="30.998" Width="29.333" Stroke="#26000000"/>
<Ellipse Height="98" Stroke="#26000000" StrokeThickness="5" Width="98" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Ellipse Height="96" Stroke="White" StrokeThickness="3" Width="96" HorizontalAlignment="Center" VerticalAlignment="Center" Canvas.Left="1" Canvas.Top="1"/>
</Canvas>
</Canvas>
</Button>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<TextBlock x:Name="txt_NoConnection" Foreground="White" TextWrapping="Wrap" Text="{Binding LocalizedResources.NoConnection, Mode=OneWay, Source={StaticResource LocalizedStrings}}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,48,0,0" FontFamily="Segoe WP Light" Visibility="Collapsed"/>
</StackPanel>
</ScrollViewer>
</DataTemplate>
and I say it is a VS bug because I found this: VS bug report
Right now I have the following:
<DockPanel Height="150">
<Button DockPanel.Dock="Right" Padding="5" Margin="5 0 5 0" FontWeight="Bold" Content="Submit" Click="Button_Click"/>
<TextBlock TextAlignment="Left" Padding="5" Text="DVM Positive Readout" />
<Border Height="25" BorderBrush="Black" BorderThickness="1" DockPanel.Dock="Top">
<TextBox HorizontalAlignment="Stretch" VerticalAlignment="Center" x:Name="DVM_Positive_ReadOut" LostKeyboardFocus="DVM_Positive_ReadOut_LostKeyboardFocus" />
</Border>
<Border Height="25" BorderBrush="Black" BorderThickness="1" DockPanel.Dock="Top">
<TextBox HorizontalAlignment="Stretch" VerticalAlignment="Center" x:Name="DVM_Negavtive_ReadOut" LostKeyboardFocus="DVM_Negative_ReadOut_LostKeyboardFocus" />
</Border>
</DockPanel>
Which results in:
I want to have two submit buttons and two textblocks. The Textboxes are correctly stacked, though it would be nice if they were centered.
Like this:
You can achieve this by using StackPanel with its horizontal or vertical attribute:
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<TextBlock TextAlignment="Left"
Padding="5"
Text="DVM Positive Readout"
Width="150"/>
<Border Height="25"
BorderBrush="Black"
BorderThickness="1"
Width="150"
DockPanel.Dock="Top">
<TextBox HorizontalAlignment="Stretch"
VerticalAlignment="Center"
x:Name="DVM_Positive_ReadOut"
LostKeyboardFocus="DVM_Positive_ReadOut_LostKeyboardFocus" />
</Border>
<Button DockPanel.Dock="Right"
Padding="5"
Margin="5 0 5 0"
FontWeight="Bold"
Content="Submit"
Click="Button_Click" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock TextAlignment="Left"
Padding="5"
Text="DVM Negative Readout"
Width="150" />
<Border Height="25"
BorderBrush="Black"
BorderThickness="1"
Width="150"
DockPanel.Dock="Top">
<TextBox HorizontalAlignment="Stretch"
VerticalAlignment="Center"
x:Name="DVM_Negavtive_ReadOut"
LostKeyboardFocus="DVM_Negative_ReadOut_LostKeyboardFocus" />
</Border>
<Button DockPanel.Dock="Right"
Padding="5"
Margin="5 0 5 0"
FontWeight="Bold"
Content="Submit"
Click="Button_Click" />
</StackPanel>
</StackPanel>
I have a Grid with opacity = "0.32" its good working fine but now i want to add some controls like textboxes and button with some background solid color but it also gets the same opacity ration that i don't need here. Any help please?? Thanks in advance.
<Grid Margin="0,1,0,2" Grid.Row="1" Grid.Column="1"
Background="#06090b" Opacity="0.25">
<Button x:Name="btnLogin" Content="Sign in" Foreground="White"
Margin="40,264,40,0" VerticalAlignment="Top" Height="60"
Click="btnLogin_Click" FontSize="18" FontWeight="Medium"
BorderThickness="1" BorderBrush="{x:Null}" Background="Blue"
Panel.ZIndex="1">
</Button>
</Grid>
What I meant in the comment is this, you dont really need the ZIndex stuff.
you have a couple of options:
1) use an alpha color, notice background is 8 characters lenght now (first 2 are alpha, or opacity)
<Grid Margin="0,1,0,2" Grid.Row="1" Grid.Column="1"
Background="#8006090b">
<Button x:Name="btnLogin" Content="Sign in" Foreground="White"
Margin="40,264,40,0" VerticalAlignment="Top" Height="60"
Click="btnLogin_Click" FontSize="18" FontWeight="Medium"
BorderThickness="1" BorderBrush="{x:Null}" Background="Blue">
</Button>
</Grid>
2) set a opacity only to the background
<Grid Margin="0,1,0,2" Grid.Row="1" Grid.Column="1" >
<Grid.Background>
<SolidColorBrush Color="#06090b" Opacity=".25"/>
</Grid.Background>
<Button x:Name="btnLogin" Content="Sign in" Foreground="White"
Margin="40,264,40,0" VerticalAlignment="Top" Height="60"
Click="btnLogin_Click" FontSize="18" FontWeight="Medium"
BorderThickness="1" BorderBrush="{x:Null}" Background="Blue">
</Button>
</Grid>