I have a ListView populated by items having a different style thanks to an ItemTemplateSelector. The DataTemplates are placed in app.xaml as ressources like the following:
<DataTemplate x:Key="FollowingOuterTemplate">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
<FlyoutBase.AttachedFlyout>
<MenuFlyout>
<MenuFlyoutItem Text="Delete" />
<MenuFlyoutItem Text="Refresh" />
<MenuFlyoutItem Text="Share" />
</MenuFlyout>
</FlyoutBase.AttachedFlyout>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
<StackPanel Orientation="Vertical" Width="282">
<TextBlock Grid.Row="0" FontSize="33" Text="{Binding Pseudo}" Foreground="Gray" Height="46" Margin="0,0,-0.333,0"/>
<TextBlock Grid.Row="1" FontSize="20" Text="{Binding NomPrenom}" Foreground="#5bc5eb" Height="27" Margin="0,0,-0.333,0"/>
<TextBlock Grid.Row="2" FontSize="20" Text="Appuyez pour ne plus suivre" Foreground="#BCC6CC" Height="27" Margin="0,0,-0.333,0"/>
</StackPanel>
<StackPanel Orientation="Vertical" HorizontalAlignment="Stretch" Width="113">
<Image Name="StatutContact" Height="43" Source="/Ressources/Images/checkedTests2.png" Stretch="Fill" Margin="0,20,0,0" Width="44" HorizontalAlignment="Center"/>
</StackPanel>
</StackPanel>
</StackPanel>
</DataTemplate>
So now I would like to show the FlyoutBase attached menu when I'm holding an Item. But as the DataTemplate is in app.xaml and it's forbidden to add event handler there (app.xaml.cs is not having any constructor as it's not constructing pages). I would like to add a Holding event handler to the StackPanel that the FyloutBase Menu is attached to.
Anyone knows how to achieve that ?
Not sure if you really just cannot do that, but Shawn Kendrot proposed a port of the Silverlight Toolkit's ContextMenuService that gets around your problem on his Blog.
Related
I am developing a WPF app from 2 locations, one has a beefy PC on windows 10, the other has a much older PC with worse hardware, running Windows 7.
on the windows 10 PC, I never notice a problem, this is only reproducible on windows 7 machine.
In my Window, I have a ContentControl which is bound to a UserControl property in the window's viewmodel.
I can show different usercontrols there, and most behave fine. I have 2 however, which when I attempt to load them, they take literally 3-5 seconds, during which the UI thread hangs.
They don't have much going on in xaml, I have more complex stuff in xaml in other controls so I don't think the problem lies there.
The one thing these 2 controls are doing differently, which other controls which don't have this issue aren't doing is in the constructor for the usercontrol in the .xaml.cs file, they set their datacontext.
InitializeComponent();
DataContext = new CreateGroupPanelViewModel();
The contructor for the viewmodel, just sets some properties to values. Mainly some string to string.Empty, instantiates 2 ObservableCollections, sets a bool to true and sets a string to "Create Game".
The first time I open this control, I have the problem but the second time it poses no delay at all. Also, if I run the program for a minute or so and THEN try to open it for the first time it will also be fine.
I cannot understand why instantiating this usercontrol would create such a massive performance hit, or why it would act so differently on the 2 different machines.
EDIT
The slowdown occurs within the InitializeComponent(); of the usercontrol.
Here is the XAML of such a control:
<UserControl x:Class="CasinoDB.UserControls.ModifyPanels.UCModifyGamePanel"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:CasinoDB.UserControls.ModifyPanels"
xmlns:vm="clr-namespace:CasinoDB.ViewModels"
mc:Ignorable="d"
d:DesignHeight="500" d:DesignWidth="300">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="{Binding Header}" HorizontalAlignment="Center" Margin="5" FontWeight="Bold" FontSize="20" />
<StackPanel Grid.Row="1" HorizontalAlignment="Center">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="5">
<TextBlock Text="Name:" Margin="5" />
<TextBox Text="{Binding Name, UpdateSourceTrigger=PropertyChanged}" Margin="5" MinWidth="150" />
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="5">
<TextBlock Text="RTP:" Margin="5" />
<TextBox Text="{Binding RTP, UpdateSourceTrigger=PropertyChanged}" Margin="5" MinWidth="50" />
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="5">
<TextBlock Text="Variance:" Margin="5" />
<TextBox Text="{Binding Variance, UpdateSourceTrigger=PropertyChanged}" Margin="5" MinWidth="150" />
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="5">
<TextBlock Text="Lines:" Margin="5" />
<TextBox Text="{Binding Lines, UpdateSourceTrigger=PropertyChanged}" Margin="5" MinWidth="100" />
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="5">
<TextBlock Text="Min Bet:" Margin="5" />
<TextBox Text="{Binding MinBet, UpdateSourceTrigger=PropertyChanged}" Margin="5" MinWidth="50" />
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="5">
<TextBlock Text="Max Win:" Margin="5" />
<TextBox Text="{Binding MaxWin, UpdateSourceTrigger=PropertyChanged}" Margin="5" MinWidth="75" />
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="5">
<TextBlock Text="Vendor:" Margin="5" />
<TextBox Text="{Binding Vendor, UpdateSourceTrigger=PropertyChanged}" Margin="5" MinWidth="150" />
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="5">
<TextBlock Text="Notes:" Margin="5" />
<TextBox Text="{Binding Notes}" Margin="5" Width="250" TextWrapping="Wrap" AcceptsReturn="True" AcceptsTab="True" SpellCheck.IsEnabled="True" Height="75" VerticalScrollBarVisibility="Auto" ScrollViewer.CanContentScroll="True" />
</StackPanel>
<CheckBox Content="Create Another" IsChecked="{Binding CreateAnother}" Margin="5" Visibility="{Binding ShowCreateAnother, Converter={StaticResource BooleanToVisibilityConverter}}" HorizontalAlignment="Center" HorizontalContentAlignment="Center" />
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="5">
<Button Content="SAVE" Command="{Binding Save}" Margin="5" Style="{StaticResource ConfirmButton}" />
<Button Content="CLOSE" Command="{Binding Close}" Margin="5" />
</StackPanel>
</StackPanel>
</Grid>
</UserControl>
OK, so after attempting to isolate the issue, I finally found my problem. It lies in SpellCheck.IsEnabled="True" on TextBoxes. I found this by commenting out large sections, testing performance, then uncommenting small amounts until it was acting slow on the machine it acts slow on.
After figuring this was the cause, I found a similar post on SO with information relating to a registry entry being filled up with dictionairies. I don't appear to have an entry in that location in the registry, so maybe my problem was similar, but that it was looking and couldn't find anything at all.
Anyway, I can live without spellcheck in those fields, I'll just remove it.
We are working on a school project and has run into a dead end. We are trying to make the grid fill the entire parent window but we are simply not able to do so.
This is what the designer shows and how we want it to look:
And this is how it looks when we run it:
Here is our xaml code:
<Grid x:Name="Grid" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="{Binding ActualWidth, RelativeSource = {RelativeSource Mode=TemplatedParent}}" Height="{Binding ActualHeight, RelativeSource ={RelativeSource Mode=TemplatedParent}}">
<Grid.Background>
<ImageBrush Stretch="UniformToFill" ImageSource="Assets/france_countryside.jpg" Opacity="0.4" />
</Grid.Background>
<!--Search section-->
<RelativePanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="{Binding ElementName=Grid,Path=ActualWidth}">
<TextBlock Text="Find available apartment" FontSize="24" Margin="30" RelativePanel.AlignHorizontalCenterWithPanel="True" />
<AutoSuggestBox Name="AutoSuggestBox"
PlaceholderText="Search"
Width="300"
RelativePanel.AlignHorizontalCenterWithPanel="True"
Margin="0,100,0,0"
TextChanged="AutoSuggestBox_OnTextChanged"
Header="Destination:"/>
<CalendarDatePicker Name="CheckInPicker" Header="Check in:" RelativePanel.Below="AutoSuggestBox" RelativePanel.AlignLeftWith="AutoSuggestBox" Margin="0,40,0,0" PlaceholderText="select a date" IsTodayHighlighted="False"/>
<CalendarDatePicker Name="CheckOutPicker" Header="Check out:" RelativePanel.Below="AutoSuggestBox" RelativePanel.AlignRightWith="AutoSuggestBox" Margin="0,40,0,0"/>
<ComboBox x:Name="numberOfGuestsBox" Width="127" RelativePanel.Below="CheckInPicker" RelativePanel.AlignLeftWith="AutoSuggestBox" Margin="0,30,0,0" PlaceholderText="Choose" Header="Guests:" FontSize="15">
<x:String>1</x:String>
<x:String>2</x:String>
<x:String>3</x:String>
<x:String>4</x:String>
<x:String>5</x:String>
<x:String>6</x:String>
<x:String>7</x:String>
<x:String>8</x:String>
<x:String>9</x:String>
<x:String>10</x:String>
</ComboBox>
<ToggleSwitch Header="Smoking allowed?" Margin="0,30,0,0" RelativePanel.Below="CheckOutPicker" RelativePanel.AlignLeftWith="CheckOutPicker" OffContent="Eew - No!" OnContent="Ya man!"/>
<Button x:Name="SearchButton" Content="Search available apartments" RelativePanel.Below="numberOfGuestsBox" RelativePanel.AlignHorizontalCenterWithPanel="True" Margin="0,30,0,30" Width="300" Height="50" Background="MediumSeaGreen" Foreground="AliceBlue" Click="SearchButton_Click"/>
</RelativePanel>
</Grid>
How do we go about this?
We have tried what to us seems everything with stretching. Margin is not really an option as we want it to be able to re-size.
It seems like (to us) that the grid is fitting the relative panel and shrinks to that size. We are somewhat sure that if we get the grid to fit the screen size of the window the relative panel will be placed in the middle. Thanks for your help in advance!
Edit:
We hold the "views" inside a frame that might be causing the problem. When i re-size the frame the image re-sized and the splitview moves to the "middle" but the scaling doesn't work on the splitview nor the picture.
Here is the code for the splitview:
<!--Split View-->
<SplitView Name="MySplitView"
Grid.Row="1"
DisplayMode="CompactOverlay"
OpenPaneLength="200"
CompactPaneLength="48"
HorizontalAlignment="Left">
<!--SplitView Pane for icons-->
<SplitView.Pane>
<ListBox Name="IconsLIstBox" SelectionMode="Single" SelectionChanged="IconsLIstBox_OnSelectionChanged">
<ListBoxItem Name="HomeListItem">
<StackPanel Orientation="Horizontal">
<TextBlock FontFamily="Segoe MDL2 Assets" FontSize="24" Text=""/>
<TextBlock Text="Home" Margin="20,0,0,0"/>
</StackPanel>
</ListBoxItem>
<ListBoxItem Name="LocationsListBoxItem">
<StackPanel Orientation="Horizontal">
<TextBlock FontFamily="Segoe MDL2 Assets" FontSize="24" Text=""/>
<TextBlock Text="Locations" Margin="20,0,0,0"/>
</StackPanel>
</ListBoxItem>
<ListBoxItem Name="MostPopularListBoxItem">
<StackPanel Orientation="Horizontal">
<TextBlock FontFamily="Segoe MDL2 Assets" FontSize="24" Text=""/>
<TextBlock Text="Most Popular" Margin="20,0,0,0"/>
</StackPanel>
</ListBoxItem>
<ListBoxItem Name="MapListBoxItem">
<StackPanel Orientation="Horizontal">
<TextBlock FontFamily="Segoe MDL2 Assets" FontSize="24" Text=""/>
<TextBlock Text="Map" Margin="20,0,0,0"/>
</StackPanel>
</ListBoxItem>
<ListBoxItem Name="ProfileListBoxItem">
<StackPanel Orientation="Horizontal">
<TextBlock FontFamily="Segoe MDL2 Assets" FontSize="24" Text=""/>
<TextBlock Text="Profile" Margin="20,0,0,0"/>
</StackPanel>
</ListBoxItem>
<ListBoxItem Name="ContactListBoxItem">
<StackPanel Orientation="Horizontal">
<TextBlock FontFamily="Segoe MDL2 Assets" FontSize="24" Text=""/>
<TextBlock Text="Contact" Margin="20,0,0,0"/>
</StackPanel>
</ListBoxItem>
</ListBox>
</SplitView.Pane>
<!--SplitView Content-->
<Frame x:Name="MyFrame" HorizontalAlignment="Left" Width="1043"/>
</SplitView>
</Grid>
We've tried with the frame being inside a splitview.content but there is no difference between the two.
You're trying to hard :) Sometimes XAML can be easy.
Container controls like Grid and RelativePanel automatically scale to the full available size of their parent, while others like StackPanel only grow to the minimal size needed for their child elements. Only the latter type needs HorizontalAlignment="Stretch" and VerticalAlignment="Stretch" to fill the screen. Never bind the Width/Height properties.
This should be enough to go full screen (if your grid is directly under a page and not in a StackPanel or similar control):
<Grid x:Name="Grid">
<Grid.Background>
<ImageBrush Stretch="UniformToFill" ImageSource="Assets/france_countryside.jpg" Opacity="0.4" />
</Grid.Background>
<!--Search section-->
<RelativePanel>
...
</RelativePanel>
</Grid>
Edit in reply to added code of the splitview in the question:
I noticed both SplitView and Frame have HorizontAlignment="Left". That's saying: "instead of using my full screen, only use whatever size you minimally need and align to the left". Remove those assignments and the width of your Frame. Prevent using alignments (left/right/center) or sizes (width/height) when you want to fill your parent control.
<!--Split View-->
<SplitView Name="MySplitView"
Grid.Row="1"
DisplayMode="CompactOverlay"
OpenPaneLength="200"
CompactPaneLength="48">
....
<!--SplitView Content-->
<Frame x:Name="MyFrame" />
</SplitView>
I have a ListBox
<ListBox Background="WhiteSmoke"
Name="LstComponents"
ItemsSource="{Binding}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding ComponentID}" />
<TextBlock Text=" - " />
<TextBlock Text="{Binding ComponentName}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
and a few buttons
<Button Content="Add New Components"
Name="BtnAdd"
Margin="5"
Click="BtnAdd_Click" />
<Button Content="Update Components"
Name="BtnUpdate"
Grid.Column="1"
Margin="5"
Click="BtnUpdate_Click" />
<Button Content="Delete Components"
Grid.Column="2"
Name="BtnDelete"
Margin="5"
Click="BtnDelete_Click" />
Now I wanted the Update and Delete button to be disabled when it is loaded whereas it should enable if the list item in the ListBox is selected.
I don't want to write a code behind for it. Plz Suggest? How would i be able to accomplish this task in XAML
You can use
IsEnabled="{Binding ElementName=ListBoxName, Path=SelectedItems.Count}"
to make it work.
I am new to windows 8.1 development.
I created the pages below with the button on the xaml page
GroupedItemsPage.xaml.cs
GroupedItemsPage.xaml
<Button Style="{StaticResource mystyle}" Click="ItemView_ItemClick" x:Name="Testing">
I was thinking that on page load of the xaml page I will be able to have access to the button property
by doing something like this .. Testing.property as we normally do in the windows development environment. This is not happening. I want to be able to style some buttons programmatically.
How can I get the property of the button in the .cs file?
Thanks. Here is the xaml page below.
<GridView
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Grouped Items"
Grid.RowSpan="2"
Padding="116,137,40,46"
ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
SelectionMode="None"
IsSwipeEnabled="false"
>
<GridView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Left" Width="Auto" Height="Auto" >
<Image Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
</Border>
<StackPanel VerticalAlignment="Bottom" Background="{ThemeResource ListViewItemOverlayBackgroundThemeBrush}">
<TextBlock Text="{Binding Title}" Foreground="{ThemeResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextBlockStyle}" Height="60" Margin="15,0,15,0"/>
<TextBlock Text="{Binding Subtitle}" Foreground="{ThemeResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
</StackPanel>-->
<Button Style="{StaticResource contactSquarePref}" Click="ItemView_ItemClick" x:Name="Testing">
<StackPanel Margin="5" >
<TextBlock Tag="cntCustName" Style="{ThemeResource CntNormalTextBlockStyle}" Text="{Binding Name }"/>
<TextBlock Tag="cntCatCode" Style="{ThemeResource CntLrgTextBlockStyle}" Text="{Binding Address}"/>
</StackPanel>
</Button>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid GroupPadding="0,0,70,0"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Margin="0,0,0,2">
<Button Foreground="{ThemeResource ApplicationHeaderForegroundThemeBrush}"
AutomationProperties.Name="Group Title"
Click="Header_Click"
Style="{StaticResource TextBlockButtonStyle}" >
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding ContactType}" Margin="0,-11,10,10" Style="{StaticResource SubheaderTextBlockStyle}" TextWrapping="NoWrap" />
<TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="0,-11,0,10" Style="{StaticResource SubheaderTextBlockStyle}" TextWrapping="NoWrap" />
</StackPanel>
</Button>
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
It depends on your XAML. If your button is just a child element (i.e. part of your logical tree) or a named resource of your page, there'll be no problem, there's a code generation process on build, that creates required fields (in this case Button Testing) and finds required elements in InitializeComponent() generated method.
But if your button is a part of control template the only way to get reference to your element is GetTemplateChild() (if you're writing your own control, as this method is protected) or manually observing Visual Tree.
So, if you have a problem with the child element of your page, past all of your XAML markup here, as the line in the question above is not enough to find solution. But if you've defined button in control template, look at the second paragraph.
i design page bellow code.
<ScrollViewer VerticalScrollBarVisibility="Visible" Grid.Row="1" x:Name="svProduct">
<StackPanel>
<ItemsControl x:Name="lstSearchResult" ItemsSource="{Binding Path=PIProductList}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Width="480" Style="{Binding CellStyle}" Orientation="Horizontal" VerticalAlignment="Center" Height="50" >
<TextBlock Foreground="Black" FontSize="20" Width="320" FontFamily="Tahoma" Margin="10,0,0,0" Text="{Binding Title}" VerticalAlignment="Center" TextWrapping="Wrap"></TextBlock>
<Button Name="btnBookmark" Click="btnBookmark_Click" Tag="{Binding}" Background="Transparent">
<Button.Content>
<Image Source="/Images/bookmarks_red.png" Width="33" Height="30" VerticalAlignment="Top" Margin="-15"></Image>
</Button.Content>
</Button>
<Button BorderThickness="0" x:Name="btnSubmit" Click="btnSubmit_Click" Background="Transparent" Tag="{Binding}" >
<Button.Content>
<Image Name="ram" Source="/Images/blue_arrow.png" Width="40" Height="40" VerticalAlignment="Top" Margin="-15"></Image>
</Button.Content>
</Button>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</ScrollViewer>
i want to access for btnBookmark visuble false .
can't access btnBookmark.Visibility=Visibility.collapsed
how to do this?
please help to me...........
The best way I know to do this is to create a Visiblity property on your item ViewModel (the one that is bound to each row in your ItemsControl) and toggle that value based on the changes to each item, presumably via the toggle button in each row. I don't know of a good way to "loop and look" for these internal controls. You're much better off using the existing data binding infrastructure to manage this for you.