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.
Related
I have a GridView which is populated (through binding) by an ObservableCollection. How do I set it up so that every time a new item is added to the ObservableCollection, the last item in the GridView always has a button on top of it ?
This is the XAML of the GridView's ItemTemplate
<GridView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Left" Width="250" Height="250">
<Border Background="White">
<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 DateMade}" Foreground="{ThemeResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
</StackPanel>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
My problem lies in this template being applied for all items in the GridView. I want it so that if it's the last item (and the last item would keep changing every time a new item is added), the above StackPanel should be replaced by another control (say, a button). How would I go about doing this ?
I would extend the template of all elements but hide the additional element and only show it if it's the latest element (specified by some bool property that is set to true on the last element). Something like this.
<GridView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Left" Width="250" Height="250">
<Border Background="White">
<Image Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
</Border>
<Button Visibility="{Binding IsLastElement, Converter={StaticResource BoolToVisibilityConverter}}"/>
<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 DateMade}" Foreground="{ThemeResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
</StackPanel>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
I think another option is to change the DataTemplate dynamically using TemplateSelecting event, on changing content of elements, but it would be a little bit more work.
There might be better solutions though.
Edit
Decided to share some links for the aforementioned idea (Which I've used in WinRT) and another one available in WPF
WPF Based Dynamic DataTemplateSelector - used similar approach in WinRT
DataTemplateSelector - tried slightly modified example and works fine
I am writing a Windows Phone 8.1 App (WINRT)
I want to display a list of countries in registration page out of which user can select one. In Windows Phone 7, we used to have LongListSelector.
What is its replacement in Windows Phone 8.1 (WinRT).
Actually, I want users to click on this control and it should open in fullscreenmode.
I am confused between ListView, ListBox, Semanticzoom
I am currently using:
<ListView
Name="UserCountry_ListPicker"
FullModeHeader="Select Country:"
SelectedIndex="-1"
Foreground="{StaticResource DefaultTheme_DarkBlueColor}"
FontWeight="ExtraLight"
Margin="0,5,0,0"
BorderBrush="{StaticResource DefaultTheme_DarkBlueColor}"
BorderThickness="0.2,0.2,0.2,3"
VerticalContentAlignment="Bottom"
VerticalAlignment="Bottom"
Background="{StaticResource DefaultTheme_TextBoxBackground_Light}"
SelectionChanged="UserCountry_ListPicker_SelectionChanged">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel
Orientation="Horizontal"
Margin="0,0,0,0">
<Border
Background="{StaticResource DefaultTheme_DarkBlueColor}"
Width="28"
Height="28">
<TextBlock
Text="{Binding CountryWithCodesGroupItem_Symbol}"
FontSize="14"
FontWeight="ExtraLight"
Foreground="WhiteSmoke"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Border>
<TextBlock
Text="{Binding CountryWithCodesGroupItem_Name}"
FontWeight="ExtraLight"
Margin="12 0 0 0"
FontSize="21"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.FullModeItemTemplate>
<DataTemplate>
<StackPanel
Orientation="Horizontal"
Margin="20,5,0,5"
>
<Border
Background="{StaticResource DefaultTheme_DarkBlueColor}"
Width="68"
Height="68">
<TextBlock
Text="{Binding CountryWithCodesGroupItem_Symbol}"
FontSize="26"
FontWeight="ExtraLight"
Foreground="WhiteSmoke"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Border>
<TextBlock
Text="{Binding CountryWithCodesGroupItem_Name}"
FontWeight="ExtraLight"
Name="CountryNames"
Margin="12 0 0 0"
Foreground="{StaticResource DefaultTheme_DarkBlueColor}"
FontSize="26"
VerticalAlignment="Center"/>
</StackPanel>
</DataTemplate>
</ListView.FullModeItemTemplate>
<ListView.HeaderTemplate>
<DataTemplate>
<StackPanel
Orientation="Horizontal"
Margin="0,0,0,-5">
<TextBlock
Name="UserCountry_Label"
FontSize="25"
FontWeight="ExtraLight"
Foreground="{StaticResource DefaultTheme_DarkBlueColor}"
Text="Country">
</TextBlock>
<Image Source="ms-appx:///Images/Login_RegistrationPage/athteriskRedForm_01.png"
Margin="3,0,0,0">
</Image>
</StackPanel>
</DataTemplate>
</ListView.HeaderTemplate>
</ListView>
But it shows opened list on page. Can't I have it closed on page like this:
example image
Maybe you will consider using ListPickerFlyout:
<Button Content="Choose country">
<Button.Flyout>
<ListPickerFlyout ItemsSource="{Binding CountryList}" Placement="Full" ItemsPicked="Items_PickedEven">
<ListPickerFlyout.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding CountryName}"/>
</DataTemplate>
</ListPickerFlyout.ItemTemplate>
</ListPickerFlyout>
</Button.Flyout>
</Button>
You may also think of using general Flyout and define it's content as ListView, ListBox or other.
As far as the differences between the three are concerned, ListView is essentially like a ListBox however it also has a View property that ListBox does not have. The View property is useful for specifying a prefdefined way to display items.
A SemanticZoom control often has a ListView control within it, and allows you to switch between two different views of the list's data set.
I am developing an app where i need to show data from web service in a listbox. I am able to show data in my listbox but its not showing the complete data. There is some problem on managing the width of my box which i am not able to fix. Can anyone please help. Here is the code:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<ScrollViewer Margin="0,17,0,49" VerticalScrollBarVisibility ="Visible" AllowDrop="False" ManipulationMode="Control">
<ListBox Name="listBox1" Margin="68,106,58,662">
<ListBox.ItemTemplate>
<DataTemplate>
<Button Width="300" Height="120">
<Button.Content>
<StackPanel Orientation="Horizontal" Height="80" Width="80" Margin="0,0,0,0">
<StackPanel Orientation="Vertical" Height="80">
<TextBlock Text="{Binding Path=News_Title}" TextWrapping="Wrap" ></TextBlock>
<TextBlock Text="{Binding Path=News_Description}" TextWrapping="Wrap"></TextBlock>
<TextBlock Text="{Binding Path=Date_Start}" TextWrapping="Wrap"></TextBlock>
</StackPanel>
</StackPanel>
</Button.Content>
</Button>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
</Grid>
Everything is fine here, just few things were making the code messy, I have fixed them.
See the updated grid now :)
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<ListBox Name="listBox1">
<ListBox.ItemTemplate>
<DataTemplate>
<Button>
<Button.Content>
<ScrollViewer HorizontalScrollBarVisibility="Auto" Height="80" Width="400">
<StackPanel Orientation="Horizontal" Margin="0,0,0,0">
<StackPanel Orientation="Vertical" Height="80">
<TextBlock Text="{Binding Path=News_Title}" TextWrapping="Wrap" ></TextBlock>
<TextBlock Text="{Binding Path=News_Description}" TextWrapping="Wrap"></TextBlock>
<TextBlock Text="{Binding Path=Date_Start}" TextWrapping="Wrap"></TextBlock>
</StackPanel>
</StackPanel>
</ScrollViewer>
</Button.Content>
</Button>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
Check this, it would help :)
Ok, this is driving me nuts! I have spent a good half of my day working on this problem. I am using a XAML based Windows 8.1 app, and essentially I am trying to implement some drag and drop functionality between groups in a GridView. So far everything has been working, except when I try to "drop" an item into a new group. After way to much time, I have narrowed it down to the "drop" event not being fired for the GroupStyle.Panel VariableSizedWrapGrid. I was trying to follow something along the lines of this webpage.
I for the life of me cannot figure out why it won't fire. I have tried testing other drop events throughout my gridview, and they all seem to be working as expected.
Below is the code I currently have in place:
<GridView
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Grouped Items"
Grid.RowSpan="2"
Padding="116,137,40,46"
ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}, Mode=TwoWay}"
SelectionMode="None"
CanDragItems="True"
DragItemsStarting="itemGridView_DragItemsStarting"
IsSwipeEnabled="true"
IsItemClickEnabled="True"
ItemClick="ItemView_ItemClick">
<GridView.ItemTemplate>
<DataTemplate>
<VariableSizedWrapGrid HorizontalAlignment="Left" Width="250" Height="250">
<Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}">
<Image Source="{Binding Image}" Stretch="UniformToFill" AutomationProperties.Name="splash"/>
</Border>
<StackPanel VerticalAlignment="Bottom" Background="{ThemeResource ListViewItemOverlayBackgroundThemeBrush}">
<TextBlock Text="{Binding Path=Name }" Foreground="{ThemeResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextBlockStyle}" Height="60" Margin="15,0,15,0"/>
</StackPanel>
</VariableSizedWrapGrid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid GroupPadding="0,0,70,0"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.GroupStyle>
<GroupStyle HidesIfEmpty="False">
<GroupStyle.HeaderTemplate>
<DataTemplate>
<VariableSizedWrapGrid Margin="0,0,0,2">
<Button Foreground="{ThemeResource ApplicationHeaderForegroundThemeBrush}"
AutomationProperties.Name="Group Title"
Style="{StaticResource TextBlockButtonStyle}"
Click="Button_Click">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Name}" 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>
</VariableSizedWrapGrid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Drop="VariableSizedWrapGrid_Drop" AllowDrop="True"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
I really hope someone out there can see my error! I'm sure it is something simple, but I just need someone to point out the obvious. :)
Had the same problem, then found this example:
How to drag item between groups in grouped gridview
I tried to use StackPanel as ItemsPanel of GridView, worked for me. Try to use StackPanel instead of ItemsWrapGrid for your GridView.
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
Still can't understand this behavior, any ideas?
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.