I have a Flyout control on my page and I want to change the background color of it. How can I achieve this?
<Button x:Name="btn" Background="Transparent">
<Image HorizontalAlignment="Center" />
<Button.Flyout >
<Flyout Placement="Left" >
<ListView ItemsSource="{x:Bind DDLItemsSource, Mode=OneWay}" Background="Green" VerticalAlignment="Stretch"
SelectionChanged="StudentsList_SelectionChanged" x:Name="StudentsList" SelectionMode="Extended" HorizontalAlignment="Stretch" >
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListView>
</Flyout>
</Button.Flyout>
</Button>
If I give Background for child element, It gives a margin between flyout and child element, so it's not acceptable. Presently look like this
To change the background color of Flyout, you can try to style the properties of the internal FlyoutPresenter that is presenting the Content of a Flyout. For example:
<Button.Flyout>
<Flyout Placement="Left">
<Flyout.FlyoutPresenterStyle>
<Style TargetType="FlyoutPresenter">
<Setter Property="Background" Value="Green"/>
</Style>
</Flyout.FlyoutPresenterStyle>
<ListView ItemsSource="{x:Bind DDLItemsSource, Mode=OneWay}" Background="Green" VerticalAlignment="Stretch" SelectionChanged="StudentsList_SelectionChanged" x:Name="StudentsList" SelectionMode="Extended" HorizontalAlignment="Stretch" >
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListView>
</Flyout>
</Button.Flyout>
Related
I create UWP Application and using RelativePanel.
I use relative panel.alignwithright, top, left, bottom panel for stretch width to listview.
But after add other element (ex. Stackpanel) to right of listview, other panel do not view in page.
So i remove relativePanel.AlignWithRight, in this case can not width stretch in listview.
What can i do?
Code:
<RelativePanel x:Name="Information" Grid.Row="1">
<ListView x:Name="MyList"
RelativePanel.AlignBottomWithPanel="True"
RelativePanel.AlignTopWithPanel="True"
RelativePanel.AlignRightWithPanel="True"
RelativePanel.AlignLeftWithPanel="True">
<ListView.ItemTemplate>
<DataTemplate>
<userControl:SpendListItem_Template Tapped="SpendListItem_Template_Tapped" ></userControl:SpendListItem_Template>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
<Setter Property="Margin" Value="10,0,10,10"></Setter>
</Style>
</ListView.ItemContainerStyle>
</ListView>
<StackPanel x:Name="TotalInformation" RelativePanel.RightOf="MyList" Width="100">
<TextBlock>Test Data</TextBlock>
</StackPanel>
</RelativePanel>
I am pretty sure you can't do this in pure XAML by just setting the some of the RelativePanel attached properties but you could handle the SizeChanged event of RelativePanel and set the width of the ListView programmatically. It's a one liner:
private void Information_SizeChanged(object sender, SizeChangedEventArgs e)
{
MyList.Width = Information.ActualWidth - TotalInformation.ActualWidth;
}
<RelativePanel x:Name="Information" Grid.Row="1" SizeChanged="Information_SizeChanged">
<ListView x:Name="MyList">
<ListView.ItemTemplate>
<DataTemplate>
<userControl:SpendListItem_Template Tapped="SpendListItem_Template_Tapped" ></userControl:SpendListItem_Template>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
<Setter Property="Margin" Value="10,0,10,10"></Setter>
</Style>
</ListView.ItemContainerStyle>
</ListView>
<StackPanel x:Name="TotalInformation" RelativePanel.RightOf="MyList" Width="100">
<TextBlock>Test Data</TextBlock>
</StackPanel>
</RelativePanel>
I want to strech a ListBox with its ListBoxItem. Streching the ListBox itself isn't a problem. The problem seems to be, to tell the ListBoxItem to use the available space in the ListBox.
<Page.Content>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Height="200">
<ListBox VerticalContentAlignment="Stretch" VerticalAlignment="Stretch" Background="Green" ItemsSource="{x:Bind Path=ChessFieldList}" >
<ListBox.ItemTemplate>
<DataTemplate >
<StackPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Yellow" BorderBrush="Red" BorderThickness="3" >
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Page.Content>
The image below shows the above and expected result.
How can I achieve the expected result?
[Edit] An other and in my opinion the correct solution: Set Width and Height of ItemsControl Children
This is a common problem. All you need to do is set the HorizontalContentAlignment of the ListBoxItems too:
<ListBox Background="Green" ItemsSource="{x:Bind ChessFieldList}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Background="Yellow" BorderBrush="Red" BorderThickness="3" Height="50">
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
Since the StackPanel doesn't contain any content, it won't have any height, so I've just added Height="50" to it for the purpose of this demonstration.
Simply add
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
If you use grouping, you should include:
<ListView.GroupStyle>
<GroupStyle HidesIfEmpty="False">
<GroupStyle.HeaderContainerStyle>
<Style TargetType="ListViewHeaderItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
</Style>
</GroupStyle.HeaderContainerStyle>
</GroupStyle>
</ListView.GroupStyle>
It's a bit more than you asked for, but it's a little-known technique.
I want to create a grid of images without any margin between them. I tried to achieve this through a GridView. If there is an easier way, please let me know.
I found this answers on StackOverflow:
https://stackoverflow.com/a/10492464
https://stackoverflow.com/a/23817931/5739170
And ended up with this code:
<Page.Resources>
<Style x:Key="MyGridViewItemStyle" TargetType="GridViewItem">
<Setter Property="Padding" Value="0" />
<Setter Property="Margin" Value="0" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GridViewItem">
<GridViewItemPresenter ContentMargin="0" Padding="0" Margin="0" BorderThickness="0"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<StackPanel>
<GridView ItemsSource="{x:Bind FieldList}" Margin="0,50,0,0" Padding="0" BorderThickness="0" ItemContainerStyle="{StaticResource MyGridViewItemStyle}" IsItemClickEnabled="True" ItemClick="OnItemClick">
<GridView.ItemTemplate>
<DataTemplate x:DataType="data:Field">
<Image Width="20" Height="20" Margin="0" Source="{x:Bind ImagePath}"/>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
<TextBlock x:Name="text">Hallo!</TextBlock>
</StackPanel>
</Grid>
But there is still a margin left:
Screenshot
I have also tried to use negative margins but when I use them clicks aren't recognized correctly anymore.
How can I remove the margins?
Seems like the GridViewItem has a default MinWidth of 44px.
You can set it to 0 via your GridViewItemStyle:
<Setter Property="MinWidth" Value="0" />
EDIT: it also has a default MinHeight, you might want to set that to 0 as well.
The code below should work:
<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Setter Property="Margin" Value="0"/>
</Style>
</GridView.ItemContainerStyle>
Your code is good. If you add a Grid in the DataTemplate (with a Background), you will see there is no margin between grids :
<DataTemplate x:DataType="data:Field">
<Grid Background="Red">
<Image Width="20" Height="20" Margin="0" Source="{x:Bind ImagePath}"/>
</Grid>
</DataTemplate>
Your problem is the following : you set a fixed size for Image control wich all of them is in a container, but the container doesn't have a fixed, so images are centered in the container.
I see two solutions. First is to remove the fixed size for Image control and use Strecth property to fill correctly :
<DataTemplate x:DataType="data:Field">
<Image VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Stretch="UniformToFill"
Margin="0"
Source="{x:Bind ImagePath}"/>
</DataTemplate>
For the first solution, you must be sure of the filling behavior of the container. You can do something like :
<GridViewItemPresenter ContentMargin="0"
Padding="0"
Margin="0"
BorderThickness="0"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch" />
The second solution is to set a fixed size on the container directly :
<Style x:Key="MyGridViewItemStyle"
TargetType="GridViewItem">
<Setter Property="Padding"
Value="0" />
<Setter Property="Margin"
Value="0" />
<Setter Property="BorderThickness"
Value="0" />
<Setter Property="Width"
Value="20" />
<Setter Property="Height"
Value="20" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GridViewItem">
<GridViewItemPresenter ContentMargin="0"
Padding="0"
Margin="0"
BorderThickness="0"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I have made an ListView ItemTemplate and I want it to be responsive (when orientation changes, for example, the listView item changes in size). I am using a Grid as a control for the inner elements of the grid but it is not behaving. The ListView.ItemContainerStyle has property HorizontalAlignment="Stretch" which is the behaviour I want, and the ItemContainerStyle is the correct width. Inside the Border and Grid I have the same HorizontalAlignment="Stretch" and they are overflowing when the TextBox contained inside has lots of text, and when there is little or no text in the TextBox the Border element shrinks to be smaller than the ItemContainerStyle is showing.
<ListView ItemsSource="{Binding TileStories}" x:Name="cont" Margin="0,10,0,10" Background="{StaticResource CustomResourceBrush}" BorderBrush="{StaticResource CustomResourceBrush}" Foreground="{StaticResource CustomResourceBrush}">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="Margin" Value="20,10,20,10" />
<Setter Property="Foreground" Value="{StaticResource BTVioletBrush}" />
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<Border CornerRadius="20" BorderThickness="0" Width="{Binding ScrollViewerWidth}" Background="White" HorizontalAlignment="Stretch">
<StackPanel Height="160" Orientation="Horizontal">
<Grid Background="black">
<TextBox Text="Example">
</Grid>
</StackPanel>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Just do this
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Stretch">
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
Define MinHeight as 0 for ItemContainerStyle
Add to your ItemContainerStyle
<Setter Property="HorizontalContentAlignment"
Value="Stretch" />
And I think Width="{Binding ScrollViewerWidth}" is not required. You can remove this.
I didn't exactly find a solution but I did find a workaround. The Grid was being bound with Width="0" if I used {Binding ActualWidth, ElementName=StackPanel, Mode=OneWay} where StackPanel was the panel within the data template. I was poking around the designer in VS2013 and figured out that the Width was 0 because (I am assuming) the items in the data template are drawn one by one and therefore the Width was zero when the first template was drawn and so on and so forth. I haven't explained that very well I guess, but the important thing is the solution:
<PivotItem x:Name="Feed">
....
<Border CornerRadius="20" BorderThickness="0" Background="White" HorizontalAlignment="Stretch">
<StackPanel Height="160" Orientation="Horizontal">
<Grid HorizontalAlignment="Stretch" Width="{Binding ActualWidth, ElementName=Feed, Mode=OneWay}">
........
</Grid>
</StackPanel>
</Border>
...
</PivotItem>
I think that the PivotItem having a non-variable Width meant the Grid had a concrete Width to inherit from.
I have a stackpanel which i fill with an textblock. I have an stackpanel.resources. I tried setting the background to transparent but it will make the whole style invisible (but the text not) and i tried using opacity. This does make my stackpanel slightly transparent but also the text within the stackpanel.
The stackpanel looks like this:
<StackPanel Orientation="Vertical" Margin="550,25,0,0">
<Border>
<TextBlock OpticalMarginAlignment="None">
<Run FontSize="24" Text="Product"></Run><LineBreak/>
<Run FontSize="18" Text="Artikelnummer: "></Run><LineBreak/>
<Run FontSize="18" Text="Omschrijving: "></Run><LineBreak/>
<Run FontSize="18" Text="Eenheid: "></Run>
</TextBlock>
</Border>
<StackPanel.Resources>
<Style TargetType="Border">
<Setter Property="Background" Value="#287d37" />
<Setter Property="Margin" Value="5" />
<Setter Property="Width" Value="400" />
<Setter Property="Height" Value="105" />
</Style>
<Style TargetType="TextBlock">
<Setter Property="Foreground" Value="White" />
<Setter Property="Margin" Value="5" />
</Style>
</StackPanel.Resources>
</StackPanel>
Does anyone know how i can achieve my goal of setting the background of the stackpanel to something like opacity 0.25 but the text inside that stackpanel not?
Thanks in advance!
Specify the alpha channel (the first byte) in the case of hardcoded colors, or the opacity if you're using a brush:
<StackPanel Background="#44287d37">
...
</StackPanel>
or
<StackPanel>
<StackPanel.Background>
<SolidColorBrush Color="Blue" Opacity=".25"/>
</StackPanel.Background>
...
</StackPanel>