I am working on a Universal app for Wp8.1/WinRt.
For the phone, I have a gridview that displays grids containing stackpanels as 'ItemTemplate'.
The grids have margins specified explicitly, like so:
<GridView ItemsSource="{Binding CurrentItems}">
<GridView.ItemTemplate>
<DataTemplate>
<Grid Width="140" Margin="6,0,6,6" x:Name="I_WANT_TO_ADJUST_MY_MARGINS">
<Border Background="{StaticResource PhoneAccentBrush}"/>
<Grid Height="140" Width="140">
<Image VerticalAlignment="Top" Margin="10" Width="100" Height="100" Source="{Binding Converter={StaticResource ImageConverter}}" HorizontalAlignment="Center" />
</Grid>
<Grid VerticalAlignment="Bottom">
<Border Background="{StaticResource PhoneBackgroundBrush}" Opacity="0.6"/>
<TextBlock Text="{Binding DisplayedName}" Style="{StaticResource BodyTextBlockStyle}" Margin="3" TextWrapping="Wrap"/>
</Grid>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
This looks great on a 6" inch phone giving me a 3 column look. But on a small phone, while I get two columns, the amount of negative space on the right is horrible.
I want to be able to make the margins of the grid I_WANT_TO_ADJUST_MY_MARGINS bigger if the screen is smaller?
Note: This layout is specifically for running on the phone.
This is how I solved it:
Add two datatemplates (big/small screen) to a resources dictionary - I used the page resources, but you can probably use any.
Add a DataTemplateSelector to the page resources. Specify the above two templates as properties, like so:
<local:WpDataTemplateSelector x:Key="WpDataTemplateSelector" BigScreenTemplate="{StaticResource BigScreen}" SmallScreenTemplate="{StaticResource SmallScreen}"></converters:WpDataTemplateSelector>
In the DataTemplateSelector use the following to determine screen width:Window.Current.Bounds.Width
Specify the ItemTemplateSelector property on the GridView
Related
I'd like to link a SolidColorBrush from my Window to Another SolidColorBrush in My dictionary. I didn't find something like this , and may be it's not possible ...
here is the code in my "ResourceDictionary.xaml"
<SolidColorBrush x:Key="BrushBlueTransparent" Color="#33006D8F"/>
And in my windows i want a link to this resource like this :
<SolidColorBrush x:Key="ControlColor" Color="{Binding Source={DynamicResource BrushEvasanOrange}}"/>
For now, this code don't work ...
I want to use this link because i want to use this resource in my page in a multiple "" and if the color had to be change in the futur it could be easy to change with this way.
The Brush resource is used like this:
<HeaderedContentControl
x:Name="_demandeur"
BorderBrush="{DynamicResource BrushEncadre}"
BorderThickness="1"
Padding="10"
Margin="0,20,0,0"
Header="{x:Static p:Resources.EV_Demandeur}"
>
<WrapPanel
Margin="0"
Orientation="Horizontal"
HorizontalAlignment="Left"
>
<TextBlock
TextWrapping="Wrap"
FontWeight="Normal"
Text="text"
/>
</WrapPanel>
</HeaderedContentControl>
It sounds like your problem is that HeaderedContentControl ignores its BorderBrush property. There are two ways to fix this: One is to replace the HeaderedContentControl's Template with one that displays a border around the content, but that's a lot of trouble. Another is to use a subclass of HeaderedContentControl which already has a template that does you want (we'll get to that last).
One very simple option is to simply put a Border around the control, and move the Margin to the Border as well, so the orange border line will be inside the margin. This isn't the right answer in your specific case, but it's a good general answer to "how do I put a border around things in XAML?"
<Border
BorderBrush="{StaticResource BrushEncadre}"
BorderThickness="1"
Margin="0,20,0,0"
>
<HeaderedContentControl
x:Name="_demandeur"
Padding="10"
Header="{x:Static p:Resources.EV_Demandeur}"
>
<WrapPanel
Margin="0"
Orientation="Horizontal"
HorizontalAlignment="Left" >
<TextBlock
TextWrapping="Wrap"
FontWeight="Normal"
Text="text"
/>
</WrapPanel>
</HeaderedContentControl>
</Border>
But I'm wondering if HeaderedContentControl is really what you want here. HeaderedContentControl is a base class for a variety of controls which display content with a header. The subclasses are much more commonly used, and I have a feeling that what you really want here is GroupBox, which is one of those subclasses. You'd use it just the way you were using HeaderedContentControl:
<GroupBox
x:Name="_demandeur"
Padding="10"
Margin="0,20,0,0"
Header="{x:Static p:Resources.EV_Demandeur}"
BorderBrush="{StaticResource BrushEncadre}"
BorderThickness="1"
>
<WrapPanel
Margin="0"
Orientation="Horizontal"
HorizontalAlignment="Left" >
<TextBlock
TextWrapping="Wrap"
FontWeight="Normal"
Text="text"
/>
</WrapPanel>
</GroupBox>
I have the following XAML code and the only element available in the C# code behind are the Grid and the FlipView. How can I make the ScrollViewer, Image or the Viewbox visibile in the code?
XAML:
<Grid x:Name="gridViewPages">
<FlipView x:Name="FlipView1" Loaded="FlipView1_Loaded" Style="{StaticResource FlipViewPreviewIndicator}" Tapped="FlipView1_Tapped">
<FlipView.ItemTemplate>
<DataTemplate>
<ScrollViewer x:Name="pagesScrollViewer" ZoomMode="Enabled"
HorizontalAlignment="Center"
VerticalAlignment="Center"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Hidden"
MinZoomFactor="1.0"
MaxZoomFactor="3.0"
Margin="0"
Width="1500" DoubleTapped="PagesScrollViewer_DoubleTapped">
<Viewbox x:Name="pagesViewbox">
<Image Source="{Binding}"
Height="730"
x:Name="pageImage" Stretch="Uniform" Loaded="MainImage_Loaded"/>
</Viewbox>
</ScrollViewer>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
</Grid>
The flipview is customized and contains also a listview defined in which is not visible in the code too...:
<Page.Resources>
...
<ListView x:Name="pagesPreview" HorizontalAlignment="Center" Height="100" VerticalAlignment="Bottom" Width="Auto"
ItemsSource="{TemplateBinding ItemsSource}"
SelectedItem="{Binding SelectedItem, Mode=TwoWay, RelativeSource={RelativeSource Mode=TemplatedParent}}"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
ScrollViewer.HorizontalScrollMode="Enabled"
ScrollViewer.VerticalScrollMode="Disabled"
Background="AliceBlue"
Opacity="1"
SelectionChanged="pagesPreview_SelectionChanged"
Visibility="Visible">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<Image Source="{Binding}" Stretch="UniformToFill"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
...
</Page.Resources>
See the basic concept of the flipview is to have multiple pages to have a flip effect. So whatever the Data template contains is repeated multiple times. So if you want the x:Name to come up then you wont have any success.
There are two ways As per my knowledge :
VisualTreeHelper -> for a better detail of it go through this link
Get elements from data template
you can manually iterate over the flipview elements and track down the children of the flipview. Try that in debug mode you'll get a fair idea of what comes after what. Just keep track of the element at which selected index position you want modified
Thanks.
I have the layout code below in xaml
<Grid>
<StackPanel x:Name="TestStackPanel" Grid.Row="2" Orientation="Horizontal">
<ScrollViewer x:Name="TestScrollViewer" Height="300" VerticalScrollBarVisibility="Auto">
<GridView x:Name="TestGridView"
Width="940"
Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
ItemTemplate="{StaticResource TestTemplate}"
ItemsPanel="{StaticResource TestItemPanelTemplate}"
ItemContainerStyle="{StaticResource TestItemStyle}"
SelectionMode="None"
HorizontalAlignment="Left"/>
</ScrollViewer>
<Button x:Name="TestButton" Content="ClickMe" VerticalAlignment="Bottom" Margin="10,5,0,0" Click="TestButton_Click"/>
</StackPanel>
</Grid>
This displays well in 1366*768 resolution, but if I change the resolution to 2560*1400, it couldn't displays as expected, I know it's certain, but how to adpat the layout to different resolutions? I have tried to add a ViewBox to encapsulate the Grid, it works well in FullScreenLandScape view, but when I change the app to Snap view, the Grid displays in a samll space.
Anyone can help?
Register to the LayoutUpdated event at the UI element.
And re-calculate the layout according to Window.Current.Bounds.Width.
Here is my scenario. Working with Bing Map control(MVVM):
<m:Map x:Name="MainMap"
ZoomLevel="{Binding MapZoomLevel, Mode=TwoWay}"
Center="{Binding MapCenter, Mode=TwoWay}"
LogoVisibility="Collapsed"
CopyrightVisibility="Collapsed"
CredentialsProvider="{Binding BingApiKey}"
UseInertia="True"
Mode="Road" Grid.Column="2" Grid.RowSpan="5">
<m:MapItemsControl
ItemsSource="{Binding Source={StaticResource WorkLayerData}}">
<m:MapItemsControl.ItemTemplate>
<DataTemplate>
<Border m:MapLayer.Position="{Binding Location}"
Background="LightPink" BorderBrush="Black">
<TextBlock Text="{Binding DisplayId}" />
</Border>
</DataTemplate>
</m:MapItemsControl.ItemTemplate>
</m:MapItemsControl>
</m:Map>
On a bottom you see how I bind my "custom" pushpins by simply declaring DataTemplate with Border and TextBlock.
What I want is to declare 3 templates for the same item and choose them based on ZoomLevel property of MainMap
For example, when ZoomLevel<=3 I willdisplay small dots, when it is between 3 and 8 I will display more fancy pushpin with ID and when it's 8+ I may display even more info.
It's a simple idea but I'd like to know if possible..
Have a look at a DataTemplateSelector solution for Silverlight.
So I have this Xaml inside a ListBox Item Template:
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Height="22" Width="Auto">
<Image Margin="-2,0,0,0" Source="{Binding Path=ADsPath, Converter={StaticResource ImxConverter}}" HorizontalAlignment="Left" Width="22" />
<TextBlock Margin="20,3,0,0" Text="{Binding Path=DisplayValue}" Width="Auto" />
<Rectangle Fill="White" Stroke="White" Margin="-2,0,-2,0.5" VerticalAlignment="Bottom" Height="1" Width="Auto" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
The idea is that the rectangle, provides a thin white line across the bottom of the entire ListBox Item; however, with the Xaml above, it only extends as long as the text, not to the full width of the ListBox.
Setting your width to Auto basically tells it to only be large enough to fit everything inside. I think you need to set your Grid's HorizontalAlignment to Stretch for it to work properly.
Edit:
I did a small sample app. Here's how I would do what you are trying to do:
On your actual listbox, I would have the HorizontalContentAlignment property set to Stretch
and
I would change your Grid to a DockPanel:
<ListBox.ItemTemplate>
<DataTemplate>
<DockPanel Height="22" HorizontalAlignment="Stretch">
<Rectangle Fill="White" Stroke="White" Margin="-2,0,-2,0.5" DockPanel.Dock="Bottom" Height="1"/>
<Image Margin="-2,0,0,0" Height="20" DockPanel.Dock="Left" Width="22" />
<TextBlock Margin="20,3,0,0" Text="Daniel Manning" DockPanel.Dock="Left"/>
</DockPanel>
</DataTemplate>
</ListBox.ItemTemplate>
Have you tried removing Width="Auto"? Auto is saying "only make me as big as I need to be" which, in your case, is determined by the length of the text. The default is "Stretch" which means "hey container, do me a favor and make me as wide as you are".