Using small 16x16 icons on NavigationPaneItem Button

Aug 18, 2011 at 5:42 AM

I would like to make the NavigationPaneItem buttons containing the icons to be just a tab narrower like in Windows Live Mail 2011 but even using small icon it blows them up larger. Isn't there a way to specify the height of the buttons?

Coordinator
Aug 18, 2011 at 10:29 AM

I think the easiest way is to create a new style for the NavigationPaneItem and make it avaiable in your project.
Something like this:

<Style x:Key="NavigationPaneItemStyle1" TargetType="{x:Type s:NavigationPaneItem}">
			<Setter Property="BorderThickness" Value="1"/>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="{x:Type s:NavigationPaneItem}">
						<DockPanel>
							<s:NavigationPaneButton x:Name="PART_ItemButton" DockPanel.Dock="Top" Image="{TemplateBinding Image}" ImageSmall="{TemplateBinding ImageSmall}" 
								IsChecked="{Binding IsSelected, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" ImageType="Large" Margin="{DynamicResource {ComponentResourceKey ResourceId=LargeItemsMargin, TypeInTargetAssembly={x:Type s:NavigationPane}}}"
								IsContentVisible="{Binding IsMinimized, Converter={StaticResource BooleanNegateConverter}, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type s:NavigationPane}}}" Anchor="Top"
								Content="{TemplateBinding Header}" FontWeight="Bold" Foreground="{DynamicResource {ComponentResourceKey ResourceId=ForeColorInactive, TypeInTargetAssembly={x:Type s:NavigationPane}}}" CheckMode="Check" Padding="{DynamicResource {ComponentResourceKey ResourceId=LargeItemsPadding, TypeInTargetAssembly={x:Type s:NavigationPane}}}" ContentTemplate="{TemplateBinding HeaderTemplate}" ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}" ContentStringFormat="{TemplateBinding HeaderStringFormat}" 
								ToolTip="{TemplateBinding ButtonToolTipGesture}"/>
							<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" DockPanel.Dock="Top" ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}" />
						</DockPanel>
						<ControlTemplate.Triggers>
							<Trigger Property="Selector.IsSelected" Value="True">
								<Setter Property="Foreground" TargetName="PART_ItemButton" Value="{DynamicResource {ComponentResourceKey ResourceId=ForeColorActive, TypeInTargetAssembly={x:Type s:NavigationPane}}}"/>
							</Trigger>
							<Trigger Property="IsMouseOver" Value="True">
								<Setter Property="Foreground" TargetName="PART_ItemButton" Value="{DynamicResource {ComponentResourceKey ResourceId=ForeColorActive, TypeInTargetAssembly={x:Type s:NavigationPane}}}"/>
							</Trigger>
							<Trigger Property="IsInsideNavigationPane" Value="True">
								<Setter Property="Visibility" TargetName="contentPresenter" Value="Collapsed"/>
							</Trigger>
							<Trigger Property="s:NavigationPanePanel.ItemDisplayType" Value="Small">
								<Setter Property="IsContentVisible" TargetName="PART_ItemButton" Value="False"/>
								<Setter Property="Margin" TargetName="PART_ItemButton" Value="-1,0,0,0"/>
								<Setter Property="DockPanel.Dock" TargetName="PART_ItemButton" Value="Right"/>
								<Setter Property="ImageType" TargetName="PART_ItemButton" Value="Small"/>
							</Trigger>
						</ControlTemplate.Triggers>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
then you can modify the s:NavigationPaneButton properties to make it as you need.
But if you want to create a complete WindowsLive style you should override the Style for the whole NavigationPane.
Aug 19, 2011 at 2:43 AM

OK I fixed this part it was simple. Thanks for the help.

Aug 19, 2011 at 2:52 AM

In case anyone is interested here is the Style

    <Style x:Key="NavigationPaneItemStyle1" TargetType="{x:Type s:NavigationPaneItem}">
    	<Setter Property="BorderThickness" Value="1"/>
    	<Setter Property="Template">
    		<Setter.Value>
    			<ControlTemplate TargetType="{x:Type s:NavigationPaneItem}">
    				<DockPanel>
    					<s:NavigationPaneButton x:Name="PART_ItemButton" Anchor="Top" CheckMode="Check" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" ContentStringFormat="{TemplateBinding HeaderStringFormat}" DockPanel.Dock="Top" Foreground="{DynamicResource {ComponentResourceKey ResourceId=ForeColorInactive, TypeInTargetAssembly={x:Type s:NavigationPane}}}" FontWeight="Bold" ImageType="small" IsChecked="{Binding IsSelected, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Image="{TemplateBinding Image}" ImageSmall="{TemplateBinding ImageSmall}" Padding="{DynamicResource {ComponentResourceKey ResourceId=LargeItemsPadding, TypeInTargetAssembly={x:Type s:NavigationPane}}}" ToolTip="{TemplateBinding ButtonToolTipGesture}" Height="22">
    						<s:NavigationPaneButton.IsContentVisible>
    							<Binding Path="IsMinimized" RelativeSource="{RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type s:NavigationPane}}">
    								<Binding.Converter>
    									<s:BooleanNegateConverter/>
    								</Binding.Converter>
    							</Binding>
    						</s:NavigationPaneButton.IsContentVisible>
    					</s:NavigationPaneButton>
    					<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" DockPanel.Dock="Top"/>
    				</DockPanel>
    				<ControlTemplate.Triggers>
    					<Trigger Property="IsSelected" Value="True">
    						<Setter Property="Foreground" TargetName="PART_ItemButton" Value="{DynamicResource {ComponentResourceKey ResourceId=ForeColorActive, TypeInTargetAssembly={x:Type s:NavigationPane}}}"/>
    					</Trigger>
    					<Trigger Property="IsMouseOver" Value="True">
    						<Setter Property="Foreground" TargetName="PART_ItemButton" Value="{DynamicResource {ComponentResourceKey ResourceId=ForeColorActive, TypeInTargetAssembly={x:Type s:NavigationPane}}}"/>
    					</Trigger>
    					<Trigger Property="IsInsideNavigationPane" Value="True">
    						<Setter Property="Visibility" TargetName="contentPresenter" Value="Collapsed"/>
    					</Trigger>
    					<Trigger Property="s:NavigationPanePanel.ItemDisplayType" Value="Small">
    						<Setter Property="IsContentVisible" TargetName="PART_ItemButton" Value="False"/>
    						<Setter Property="Margin" TargetName="PART_ItemButton" Value="-1,0,0,0"/>
    						<Setter Property="DockPanel.Dock" TargetName="PART_ItemButton" Value="Right"/>
    						<Setter Property="ImageType" TargetName="PART_ItemButton" Value="Small"/>
    					</Trigger>
    				</ControlTemplate.Triggers>
    			</ControlTemplate>
    		</Setter.Value>
    	</Setter>
    </Style>
I simply adjusted the height of the button and modified the PART_ItemButton section of ImageType="Large" to ImageType="small"