I have a ListView that looks like this:
I am trying to remove the space between the items.
Setting the Margin and Padding of the ItemTemplate to zero is not working.
Setting HorizontalContentAlignment and VerticalContentAlignment to Stretch is not working.
Got it, the ItemContainerStyle must have a template with a ListViewItemPresenter where the ContentMargin is set to 0. As well as the Margin of the ItemContainerStyle must be 0.
ListView:
<ListView ItemContainerStyle="{StaticResource CustomItemContainerStyle}">
<ListView/>
Style:
<Style x:Key="CustomItemContainerStyle" TargetType="ListViewItem">
<!-- The following two styles fixes the issue of items not expanding 100%. -->
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
<!-- Margin must be zero to get rid of the space between items. Default is 1.-->
<Setter Property="Margin" Value="0" />
<!-- ListViewItem styles and templates: http://msdn.microsoft.com/en-us/library/windows/apps/xaml/jj709921.aspx -->
<!-- ContentMargin must be zero to get rid of the vertical space between items. Defaults is 4. -->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<ListViewItemPresenter
ContentTransitions="{TemplateBinding ContentTransitions}"
Padding="{TemplateBinding Padding}"
SelectionCheckMarkVisualEnabled="True"
CheckHintBrush="{ThemeResource ListViewItemCheckHintThemeBrush}"
CheckSelectingBrush="{ThemeResource ListViewItemCheckSelectingThemeBrush}"
CheckBrush="{ThemeResource ListViewItemCheckThemeBrush}"
DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}"
DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}"
FocusBorderBrush="{ThemeResource ListViewItemFocusBorderThemeBrush}"
PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"
PointerOverBackground="{ThemeResource ListViewItemPointerOverBackgroundThemeBrush}"
SelectedBorderThickness="{ThemeResource ListViewItemCompactSelectedBorderThemeThickness}"
SelectedBackground="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}"
SelectedForeground="{ThemeResource ListViewItemSelectedForegroundThemeBrush}"
SelectedPointerOverBackground="{ThemeResource ListViewItemSelectedPointerOverBackgroundThemeBrush}"
SelectedPointerOverBorderBrush="{ThemeResource ListViewItemSelectedPointerOverBorderThemeBrush}"
DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="Stretch"
PointerOverBackgroundMargin="0"
ContentMargin="4" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Final screenshot:
Related
sciChart3D WPF.
I set up the MajorTickLineStyle and applied it to the X-axis. However, the tick mark on the X-axis shows an incorrect effect.
<Style x:Key="MajorTickLineStyle" TargetType="Line">
<Setter Property="Stroke" Value="Red"/>
<Setter Property="StrokeThickness" Value="5"/>
<Setter Property="Y2" Value="20"/>
<Setter Property="X2" Value="20"/>
</Style>
<s3D:SciChart3DSurface.XAxis>
<s3D:NumericAxis3D TickTextBrush="Red" x:Name="XAxis"
FontSize="20"
FontWeight="Bold"
TickLabelAlignment="ScreenAutoRotated"
MajorTickLineStyle="{StaticResource MajorTickLineStyle}" />
</s3D:SciChart3DSurface.XAxis>
sciChart tick length incorrect effect:
The code and usage of the style is correct. It was a bug in SciChart SDK, which has already been fixed in v5.5.0.12243
I want to add custom controls, like a slider bar or a button in the secondary section of the app bar in windows phone 8.1, like the one in the app bar of camera app.
Any idea how to do it?
So, it appears, that my solution works only in designer, tried another, but which also only worked in designer. So I would conclude that it is impossible to put in commandbar anything other than default buttons, my attempts were as following:
I tried to apply this style to AppbarButoon, button changed to slider in designer, but on the phone it style has been overriden
<Style x:Key="ButtonStyle1" TargetType="Button">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="{ThemeResource PhoneForegroundBrush}"/>
<Setter Property="Foreground" Value="{ThemeResource PhoneForegroundBrush}"/>
<Setter Property="BorderThickness" Value="{ThemeResource PhoneBorderThickness}"/>
<Setter Property="FontFamily" Value="{ThemeResource PhoneFontFamilyNormal}"/>
<Setter Property="FontWeight" Value="{ThemeResource PhoneButtonFontWeight}"/>
<Setter Property="FontSize" Value="{ThemeResource TextStyleLargeFontSize}"/>
<Setter Property="Padding" Value="9.5,0"/>
<Setter Property="MinHeight" Value="{ThemeResource PhoneButtonMinHeight}"/>
<Setter Property="MinWidth" Value="{ThemeResource PhoneButtonMinWidth}"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="Grid" Background="Transparent">
<Slider ValueChanged="RangeBase_OnValueChanged" Width="100" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Second approach was to derive from slider and implement ICommandBarElement, it seemed to be working untill I run it under emulator, Slider didn't even showed up.
public sealed class CommandBarSlider : Slider, ICommandBarElement
{
public CommandBarSlider()
{
this.DefaultStyleKey = typeof(Slider);
}
public bool IsCompact { get; set; }
}
The obvious conclusion to be drawn from these codes is that what you're trying to do is either impossible, or I've overlooked something.
(Probably I've overlooked something )
Seem no matter where I put the HorizentalAlignment = "Center" in my ListViewColumn it doesn't effect the outcome.
This is all I have tried so far,
<ListView.View>
<GridView>
<GridViewColumn Header="Device name" Width="120" DisplayMemberBinding="{Binding Path=DeviceName}"/>
<GridViewColumn>
<GridViewColumnHeader Content=" GPS Signal " />
<GridViewColumn.CellTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Center">
<Image Width="13" HorizontalAlignment="Center" Source="{Binding Path=GpsSignalImagePath}"/>
</Grid>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn>
</GridView>
</ListView.View>
</ListView>
As you can see it's mentioned in Grid and also in Image itself but no luck. The result shows up aligned to left as it's shown in the picture below.
Set the HorizontalAlignment inside ItemsPanelTemplate like this
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<Grid HorizontalAlignment="Center"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
You can try to set HorizontalContentAlignment of ListViewItem from style to alter alingment of cell's content :
<ListView ....>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Center" />
</Style>
</ListView.ItemContainerStyle>
......
......
</ListView>
I want to inherit and alter the style of the default button but cannot figure out how.
Using:
<Style x:Key="MyBasicButtonStyle" TargetType="Button" BasedOn="{StaticResource {x:Type Button}}"></Style>
does not work, it says the "Type" cannot be used in Windows Store App project....
You can do it like this:
<Style x:Key="BaseStyle" TargetType="Button">
<Setter Property="Background" Value="Yellow" />
...
</Style>
<Style x:Key="InheritedStyle" TargetType="Button" BasedOn="{StaticResource BaseStyle}">
<Setter Property="Foreground" Value="Red" />
...
</Style>
I'm using a LongListSelector and the scrollbar on the right is adding a bit of empty space which is messing up the design, so I want to hide it. I've tried the following:
ScrollBar sb = ((FrameworkElement)VisualTreeHelper.GetChild(FileList, 0))
.FindName("VerticalScrollBar") as ScrollBar;
sb.Width = 0;
But that's not working for wp8, I can make the width larger though but not smaller. It has a ScrollViewer.VerticalScrollBarVisibility property but changing it to Hidden or Disabled doesn't do anything.
/Edit:
This appears to work:
var sb = ((FrameworkElement) VisualTreeHelper.GetChild(FileList, 0))
.FindName("VerticalScrollBar") as ScrollBar;
sb.Margin = new Thickness(-10, 0, 0, 0);
But if anyone has a cleaner method I would still like to hear it.
You can address this by retemplating the whole control.
Add this resource:
<Style x:Key="LongListSelectorWithNoScrollBarStyle" TargetType="phone:LongListSelector">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="phone:LongListSelector">
<Grid Background="{TemplateBinding Background}" d:DesignWidth="480" d:DesignHeight="800">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ScrollStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="00:00:00.5"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Scrolling" />
<VisualState x:Name="NotScrolling"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Margin="{TemplateBinding Padding}">
<ViewportControl x:Name="ViewportControl" HorizontalContentAlignment="Stretch" VerticalAlignment="Top"/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Use the resource
<phone:LongListSelector Style="{StaticResource LongListSelectorWithNoScrollBarStyle}">
....
</phone:LongListSelector>
Voila. No scrollbar.