Показывать asp.net Wizard Control SideBar сверху, а не на стороне

Question

Я создаю мастер и его шаги программно, и я пытаюсь показать боковую панель по умолчанию со своими ссылками на каждый шаг сверху, а не на стороне. Это возможно?

Wizard wiz = new Wizard(); 
//Do stuff with wizard steps 

Answer 1

Это возможно с помощью CSS

ASP.NET декларативный код

<asp:Wizard ID="ApplicationWizard" runat="server" DisplaySideBar="True"> 
     <%-- LAYOUT --%> 
     <LayoutTemplate> 
      <div> 
       <asp:PlaceHolder ID="headerPlaceHolder" runat="server" /> 
      </div> 
      <div id="stepIndicator"> 
       <asp:PlaceHolder ID="sideBarPlaceHolder" runat="server" /> 
      </div> 
      <div> 
       <asp:PlaceHolder ID="WizardStepPlaceHolder" runat="server" /> 
      </div> 
      <div> 
       <asp:PlaceHolder ID="navigationPlaceHolder" runat="server" /> 
      </div> 
     </LayoutTemplate> 

     <%-- HEADER --%> 
     <HeaderTemplate> 
      <h1 class="text-center">My Form</h1> 
      <%-- TODO: Add your header elements here --%> 
     </HeaderTemplate> 

     <%-- SIDEBAR --%> 
     <SideBarTemplate> 
      <ul id="header"> 
       <asp:ListView ID="SideBarList" runat="server"> 
        <ItemTemplate> 
         <li><asp:LinkButton ID="sideBarButton" runat="server" /></li> 
        </ItemTemplate> 
        <SelectedItemTemplate> 
         <li><asp:LinkButton ID="sideBarButton" runat="server" CssClass="active-step" /></li> 
        </SelectedItemTemplate> 
       </asp:ListView> 
      </ul> 
     </SideBarTemplate> 

     <%-- Wizard Steps --%> 
     <WizardSteps> 
      <asp:TemplatedWizardStep ID="AppStep1" runat="server" Title="Step 1"> 
       <ContentTemplate> 
        <%-- TODO: Add your wizard step elements here --%> 
       </ContentTemplate> 
      </asp:TemplatedWizardStep> 

      <asp:TemplatedWizardStep ID="AppStep2" runat="server" Title="Step 2"> 
       <ContentTemplate></ContentTemplate> 
      </asp:TemplatedWizardStep> 

      <asp:TemplatedWizardStep ID="AppStep3" runat="server" Title="Step 3"> 
       <ContentTemplate></ContentTemplate> 
      </asp:TemplatedWizardStep> 

      <asp:TemplatedWizardStep ID="AppStep4" runat="server" Title="Step 4"> 
       <ContentTemplate></ContentTemplate> 
      </asp:TemplatedWizardStep> 

      <asp:TemplatedWizardStep ID="AppStep5" runat="server" Title="Step 5"> 
       <ContentTemplate></ContentTemplate> 
      </asp:TemplatedWizardStep> 
     </WizardSteps> 
    </asp:Wizard> 

CSS Stylesheet

#stepIndicator { 
    list-style: none; 
    margin: 0px; 
    padding: 0px; 
    text-align: center; 
} 

#stepIndicator li { 
    display: inline-block; 
} 

#stepIndicator li a { 
    text-decoration: none; 
    padding: 10px; 
    display: block; 
} 

Но как ???:

1. На шаблоне SideBar, создать элемент списка
2. Внутри вложенной лилии, вставьте пуговицу ссылки вы хотите
3. Вывод будет формат по умолчанию (боковая панель на стороне)
4. Добавить text-align: center для #stepIndicator по центру на боковой панели
5. Добавить display: inline-block для #stepIndicator li, чтобы выровнять элементы #stepIndicator инлайн.